CODEWITHSUNDEEP
htmlcss
nehel
nehel

Reputation: 885

ul border length half of li element

I want this blue ul borders to be like in the center under this black li elements and have 50% of the child width, but I don't know how can I achieve this. I've tried with :before but seems like it's for only one "ul" element.

#one{
    width: 300px;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.4);
}
ul{
    list-style-type: none;
}

.a{
    border-bottom: 4px solid blue;
    
}

.b
{
    width: 200px;
    height: 100px;
    background-color: black;
    margin: 20px;
}
<div id="one">
    <ul class="a">
        <li class="b"></li>
        <li class="b"></li>
    </ul>   
    <ul class="a">
        <li class="b"></li>
        <li class="b"></li>
    </ul> 
</div>

Upvotes: 0

Views: 478

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

If I understand your question correctly, you can remove your border style, and use this in its place:

li {
  position: relative;
}

li:last-of-type:after {
  content: '';
  position: absolute;
  left: 25%;
  width: 50%;
  bottom: -12px;
  border-bottom: 4px solid blue;
}

Snippet:

#one{
    width: 300px;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.4);
}
ul{
    list-style-type: none;
}

.b
{
    width: 200px;
    height: 100px;
    background-color: black;
    margin: 20px;
}

li {
  position: relative;
}

li:last-of-type:after {
  content: '';
  position: absolute;
  left: 25%;
  width: 50%;
  bottom: -12px;
  border-bottom: 4px solid blue;
}
<div id="one">
    <ul class="a">
        <li class="b"></li>
        <li class="b"></li>
    </ul>   
    <ul class="a">
        <li class="b"></li>
        <li class="b"></li>
    </ul> 
</div>

Upvotes: 1

Related Questions