How To Make Horizontal Line Start From The Right Of Div Element?

The code here would show a list with a horizontal line right after the list label So in this list, I would like the line to start from the right of the element it is in. Is it po

Solution 1:

I think this is what you want, modified some html and exploited css to reach the goal.

.list-ability {
    position: relative;
}

.list-abilityspan {
    background-color: white;
    padding-right: 10px;
}

.list-ability:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: -1;
}

<divclass="list-left"><ul><li><divclass="list-ability"><span>Friendliness</span></div><divclass="h-line"></div><br><pclass="list-desc">Be able to be friends with everyone</p></li></ul><ul><li><divclass="list-ability"><span>Dominance</span></div><br/><pclass="list-desc">You do not hesitate to impress your own others on others and take charge of situations when required. You may come across as dominant or controlling to others, and appear dismissive of others' views.</p></li></ul><ul><li><divclass="list-ability"><span>Adventuresome</span></div><br><pclass="list-desc">You prefer routine and staying with familiar roles within your comfort zone. You may nd it di cult to adapt to change and may choose to forgo new experience and opportunities to learn.</p></li></ul></div>

Solution 2:

This is how we create horizontal line, And i have made it to start from right

<div>Somthing</div>

CSS

<style>div{
   display: block;
   position: relative;
}
div:before{
   content:"";
   position: absolute;
   border-bottom: 3px solid black;
   width: 40%;
   right: 0;
   bottom: 0;
</style>