CSS: стилизация содержимого перед псевдоэлементом в списке - PullRequest
Новая
       7

CSS: стилизация содержимого перед псевдоэлементом в списке

9 голосов
/ 10 февраля 2012

Я пытаюсь оформить упорядоченный список (без точки, границы с радиусом и поворотом на 45 °) 

<div class="test">
  <ol>
    <li><span>it's a test</span></li>
    <li><span>and again</span></li>
  </ol>
</div>

И CSS 

.test ol {
  counter-reset: li;
  list-style-type: none;
}
.test ol > li {
  position:relative;
  list-style:none;
}
.test ol > li:before {
  content:counter(li);
  counter-increment:li;

  position:absolute;
  top:-2px;
  left:-24px;
  width:21px;

  color:#E2202D;
  font-weight:bold;
  font-family:"Helvetica Neue", Arial, sans-serif;
  text-align:center;
  border: 1px dashed #E2202D;
  -webkit-border-radius:6px;
  border-radius:6px;
  -webkit-transform: rotate(45deg);
}

Это дает мне что

И это я здесь блокирую ... Как повернуть границу без поворота числа внутри?Как стилизовать содержимое псевдоэлемента в css?

Спасибо за любой совет:)

Ответы [ 2 ]

7 голосов
/ 10 февраля 2012

Нет возможности повернуть границу и текст отдельно.Вместо этого вы можете разделить число и границу на два разных псевдоэлемента: :before и :after.

См .: http://jsbin.com/agotuj/54/edit

.test ol {
    counter-reset: li;
    list-style-type: none;
}
.test ol > li {
    position: relative;
    list-style: none;
    margin-bottom: 20px;
    padding-left: 5px;
}
.test ol > li:before, .test ol > li:after {
    position: absolute;
    top: -2px;
    left: -24px;
    width: 21px;
    height: 21px;
    line-height: 21px;
    font-size: 16px;
}
.test ol > li:before {
    content: counter(li);
    counter-increment: li;
    color: #E2202D;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}
.test ol > li:after {
    content: '';
    border: 1px dashed #E2202D;
    border-radius: 6px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
0 голосов
/ 01 октября 2017 
{"data":{"error":"HTTP Access is disabled. Requests must use SSL (HTTPS)."},"success":false,"status":400}
...