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.
mikoMK
(Michael Koch)
April 3, 2022, 2:37pm
2
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.
::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
The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.
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
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
mikoMK
(Michael Koch)
April 4, 2022, 10:14am
5
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
mikoMK
(Michael Koch)
April 4, 2022, 11:50am
7
… or I misunderstood.
Let’s see what OP has to say.
1 Like
it will be awesome if we both miss understand it
1 Like
I wanted every main <li>
underlined as @mikoMK said.
Thank you both for your help. I got the idea.
2 Likes