Изменить значок маркера на двойную кавычку

У меня есть список в HTML. Теперь я хотел бы изменить значок пули на значок двойной кавычки.

Я нашел этот интересный веб-сайт.

Итак, у меня есть код, как показано ниже:

.listStyle li:before {
  list-style: none;
  content: "\00BB";
}
<ul class="listStyle">
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
</ul>

Скриншот выглядит так:

HTML-список с маркерами и двойными кавычками

Вместо значка пули мне нужен значок двойной кавычки. Не оба рядом друг с другом.

Как я могу этого добиться?

Чего мне нужно избегать, так это того, чтобы строка находилась на той же вертикальной линии, когда требуется разрыв строки: введите здесь описание изображения


html css pseudo-element html-lists
person jublikon    schedule 14.12.2015    source источник

Ответы (3)


arrow_upward
4
arrow_downward

вы применяете свойство list-style к псевдоэлементам, а не к элементам li. Для выравнивания двойной кавычки вы можете использовать абсолютное позиционирование с помощью:

.listStyle {
  list-style: none;
  padding-left:1.5em;
}
.listStyle li{
  position:relative;
}
.listStyle li:before {
  content: "\00BB";
  position:absolute;
  right:100%;
  width:1.5em;
  text-align:center;
}
<ul class="listStyle">
  <li>SOME TEXT<br/>second line</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
</ul>

person web-tiki    schedule 14.12.2015
comment
Спасибо за помощь. Проблема, которая у меня все еще есть, заключается в том, что текст выровнен со значками списка. Но значки списка должны быть рядом с текстом слева, когда необходим разрыв строки. Я обновлю свой пост, чтобы показать, чего мне нужно избегать - person jublikon; 14.12.2015
comment
Добавление отступов к <li> и отрицательного поля к псевдоэлементу должно работать - person Sam Willis; 14.12.2015
comment
@jublikon Я обновил ответ решением для выравнивания двойной кавычки - person web-tiki; 14.12.2015
comment
@web-tiki Ваш ответ отлично работает. Спасибо. У меня остался один маленький вопрос: как я могу добиться пробела между текстом и значком? Добавление пробела перед текстом игнорируется браузером - person jublikon; 14.12.2015
comment
@jublikon Я добавил пробел слева с отступом к элементу ul и отцентрировал двойные кавычки с шириной на псевдоэлементе и text-align:center; - person web-tiki; 14.12.2015
comment
У меня работает нормально! Спасибо - person jublikon; 14.12.2015

arrow_upward
1
arrow_downward

Вы можете изменить пулю, выполнив следующие действия:

ul {
  list-style: none;
  padding-left:0px;
}
ul li:before {
  content: "\00BB";
}
<ul>
  <li>text</li>
  <li>text</li>
</ul>

padding-left:0px; удалит отступ слева, чтобы у него больше не было отступа.

person Rev Nosky    schedule 14.12.2015

arrow_upward
0
arrow_downward

Это предотвратит перенос новых строк под маркером:

.listStyle li {
    list-style: none;
}
.listStyle li:before {
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  content: "\00BB";
}
person Jameal G    schedule 14.12.2015