Добавьте горизонтальное правило к каждому <li>

В моем <ul> списке я хотел бы добавить <hr> после каждого элемента списка. Результат должен выглядеть так:

<ul class="mylist">
    <li>
        moooo!
        <hr width="40%">
    </li>
    <li>
        maaaaa!
        <hr width="40%">
    </li>
    ...
</ul>

Плохой стиль, добавляющий <hr> к каждому <li>, поэтому я хотел бы преувеличивать это, используя только css. Я не могу использовать:

.mylist > li: after{
    content: "<hr>"
}

поскольку содержимое будет удалять символы.

Я также использую не для использования jQuery:

$('.mylist').find('li').append('<hr width="40%">');

Итак, вопрос в том, как я могу добавить <hr width="40%"> к каждому <li> определенного списка, используя css3?

Ответ 1

jQuery Solution

Только что понял, что вы хотите вставить элемент hr внутри li, прежде чем закрыть его, да, это совершенно верно, поэтому просто используйте append(), и обратите внимание: вы не можете сделать это, используя только CSS, поскольку вы не может изменять DOM с помощью CSS, вам нужно использовать jQuery или JS

jQuery("ul li").append("<hr />");

Демо

Решение CSS

Если вам не нужен дополнительный элемент или вам не нужно решение jQuery (как хотите)

Использование элемента hr как прямого дочернего элемента ul не является допустимой разметкой, вместо этого вы можете использовать border-bottom для каждого li, который будет вести себя так же, как и hr, но если вы хотите явный способ сделать это, скажем, для управления width разделителя без изменения width li, чем вы можете сделать это, как это

Демо

ul li:after {
    content: "";
    display: block;
    height: 1px;
    width: 40%;
    margin: 10px;
    background: #f00;
}

Здесь я просто создаю виртуальный элемент уровня block, который на самом деле не существует в DOM, но он просто сделает то, что вам нужно. Вы можете просто создать элемент, так же, как вы создаете нормальный div. Вы также можете использовать border для этого, но для поддержания тонкой линии по горизонтали, я назначил height: 1px; и вместо того, чтобы использовать margin для перемещения вверх.

Ответ 2

Я думаю, что лучше использовать CSS для этого. например, вы можете прекратить использование тега <hr>, вместо этого сделайте что-то вроде:

<ul class="mylist">
    <li>
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

а затем с помощью CSS:

.mylist li { border-bottom: 1px solid black; }

Существуют и другие варианты, например, если вы хотите показать горизонтальную линию только для некоторых элементов списка, вы можете дать им класс и добавить правило CSS только для этого класса. например:

<ul class="mylist">
    <li class="hr">
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

и CSS:

.mylist li.hr { border-bottom: 1px solid black; }

Ответ 3

Вы можете использовать следующее:

<ul>
   <li></li>
</ul>
<hr/>

Это просто. Если у вас есть вложенные ul и li, вы используете li вместо <hr/> или просто <hr/> внутри тега <li></li>. Смотри ниже. Его чисто ваш выбор.

<ul>
  <li>
    <ul><li></li></ul>
  </li>
  <li style="height:1px;border:solid 1px #666"> </li> // or you can also use 
  <li><hr/></li>
  <li> 
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

Ответ 4

Теги в контенте не допускаются и даже если это будет очень ввести в заблуждение (css {content: "text" }, как добавить теги?)

Если вы считаете неправильным добавить <hr> в HTML, то это неправильно с добавлением css (если это будет возможно) или js. IMHO первый Вы должны попытаться использовать границу <li > , если результат не будет таким ожидаемым, добавьте, что <hr>

Ответ 5

Вставить A Class Что создает A bottom-border: Для каждого <li>

<!--########## STYLE EACH li USING CLASS ##########-->
<style>
  .hr {
     width:40%;
     border-bottom:1px solid rgba(0,0,0,.7);
   }

</style>

<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
    -CONTENT-

</li>
<li class="hr">
    -CONTENT-
</li>
...