Border line under text node of <li>, when it contains additional sub element such as another <ul> after the text node

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks#selectors_four

In this test, how can I add border-bottom under the text content of ul.list>li itself, instead of under the whole li element? i.e. I want the border line appear under list item text “Two” but not “2.2”. Is this possible?

I tried the selector ul.list>li::first-line, it doesn’t work.

Hi @casinero.triste

That’s a tricky question and I can’t think of a way to accomplish that with the given code. If we could add a class to <li>s with a sublist (either manually or programmatically) the HTML would look like this:

<ul class="list">
  <li>One</li>
  <li class="has-sub-list">Two
    <ul>
      <li>2.1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>Three</li>
</ul>

Then we could use two CSS rules

  • Put a border on top of sublists
  • Put a border below main list items where there’s no sublist
.list ul {
  border-top: 1px solid black;
}

.list > li:not(.has-sub-list) {
 border-bottom: 1px solid black;
}

Maybe someone comes up with a simpler solution. :blush:

::first-line only applies to CSS that styles text. So you could change the color of the first line or it’s font size, but you can’t add borders.

Have a nice day,
Michael

1 Like

Hello @casinero.triste and @mikoMK

not sure if you want that or not but you can use text-decoration

which will underline the text you want

as the border will scale to the full width of the element
but you can overcome this by setting the width of the li item you want

but i can not think of a selector with the provided code so i would change it a little bit as @mikoMK suggested

and use this attribute
text-decoration: underline;
or
use border and width

hope that help and have a nice day both of you :slight_smile:

1 Like

if you do not want to change the code you can use this

li > ul{
border-top: 3px solid black;
} 

but it will scale to the full width

1 Like

That’s basically what my first rule does. I think OP wants to have every main <li> underlined hence my second rule.

i thought he want underline below the two looks like i miss understand what he asking about

1 Like

… or I misunderstood. :grin:
Let’s see what OP has to say.

1 Like

it will be awesome if we both miss understand it :rofl:

1 Like

I wanted every main <li> underlined as @mikoMK said.

Thank you both for your help. I got the idea.

2 Likes