Question 206350 in Html Question posted in
Some basic documentation can be found here.

Html – Align text inside list item so it is not under element decoration

I need top-bottom borders for list items. The item’s decoration needs to be customized and if element text is too long it should not be under the element decoration. I can’t figure it out.

div {
  width: 20%;
}

ul {
  list-style-position: inside;
  list-style-type: none;
}

li {
  border-top: 1px solid;
  padding: 0.1em 0.3em;
}

li span {
  position: relative;
  left: 1em;
}

li::before {
  content: "2022";
  color: #800000;
  font-size: 1em;
  vertical-align: middle;
  line-height: 1em;
  width: 10px;
}

li:last-of-type {
  border-bottom: 1px solid;
}
<div>
  <ul>
    <li><span>foo</span></li>
    <li><span>bar</span></li>
    <li><span>very long sentence is here which should be nicely aligned</span></li>
  </ul>
</div>

https://jsfiddle.net/vgec25Lw/26/

Tags:

2

Answers


  1. 0

    If you set the position of your pseudo elements to absolute you get what you want:

    div {
  width: 20%;
}

ul {
  list-style-position: inside;
  list-style-type: none;
}

li {
  border-top: 1px solid;
  padding: 0.1em 0.3em;
}

li span {
  position: relative;
  left: 1em;
}

li::before {
  content: "2022";
  color: #800000;
  font-size: 1em;
  vertical-align: middle;
  line-height: 1em;
  width: 10px;
  position: absolute;
}

li:last-of-type {
  border-bottom: 1px solid;
}
    <div>
  <ul>
    <li><span>foo</span></li>
    <li><span>bar</span></li>
    <li><span>very long sentence is here which should be nicely aligned</span></li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    Try displaying the li as flex.

    li {
    border-top: 1px solid;
    padding: 0.1em 0.3em;
    display: flex; /* new line */
}

    Remove the width from the li

    li::before {
    content: "2022";
    color: #800000;
    font-size: 1em;
    vertical-align: middle;
    line-height: 1em;
    /* width: 10px; */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search