How to style links before line break element

August 20, 2023

Is there a way to style only the links that appear before the line break element?

I would like to style Link 1 and Link 2 only.

<ul>
    <li>
        <a href="#">Link 1</a> and <a href="#">Link 2</a>
        <br>
        word word word word word word <a href="#">Link 3</a>
    </li>
</ul>

I know I can easily inline the style but I was wondering if there is another way to go about doing this.

>Solution :

Yes you can use a sibling combinator

a {
    background-color: pink;
}

br + a {
    background-color: transparent;
    color: red;
}

    <ul>
        <li>
            <a href="#">Link 1</a> and <a href="#">Link 2</a>
            <br>
            word word word word word word <a href="#">Link 3</a>
        </li>
    </ul>