Стиль CSS: перед позицией? Лишний пробел

#html #css #pseudo-element

#HTML #css #псевдоэлемент

Вопрос:

Скрипка здесь: https://jsfiddle.net/sgbotsford/d52zyp0t/72 /

Откуда берется дополнительный отступ первой строки в <li> using => :перед содержимым?

Вот в чем проблема. Обстоятельства, не зависящие от меня, помещают теги абзацев внутри элементов списка. Когда я использую a :before с отрицательным левым, это работает — оно находится на полях, как я и хочу. Но отступ текста увеличивается там, где я использовал :раньше. Откуда берется этот дополнительный отступ?

Желаемое поведение заключается в том, чтобы абзацы и элементы списка были оформлены одинаково, за исключением =>, плавающего с левого поля.

Я уверен, что в конечном итоге смогу поэкспериментировать достаточно, чтобы взломать решение, но сейчас я пытаюсь понять это поведение с точки зрения коробочной модели.

В одном ответе предлагалось удалить тег text-indent из <p> этого, что приводит к удалению <p> и уменьшению отступа на <li>

HTML

 <html>
<head>

</head>
<body>

<div class=content>

<p>This is a paragraph. It has several sentences.  It goes on and on and on and on. It has several sentences.  It goes on and on and on and on. </p>

<ul class="c">
  <li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification. It looks a lot like a paragraph.</p></li>
 <li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification.</p></li>
 </ul>

<ul class="b">
  <li><p>This is a list element that is styled using ::before and outdenting the content. Where does the extra space come from? </p></li>
   <li><p>This is a list element that is long enough to wrap, I think.</p></li>
</ul>


</div>
</body>
</html>

CSS

 body {
  text-align: justify;
  hyphens: auto;
  margin-left: 3rem;
}

.content {
  width: 40rem;
  background-color: yellow;
}

p   {
  width: 15rem;
  margin: auto;
  margin-top: 0.6rem;
  background-color: lightgreen;
  padding: 0;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.4rem;
  text-indent: 1rem;
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
    }


ul {
  list-style-type: none;
  margin: 1rem;
  padding: 0;
}

ul.b li p::before {
    content: "=>";
    font-weight: bold;
    position: relative;
    left: -2.5rem;
    }

1. Ну, это явно зависит от content: "=>"; ширины символов

2. li>p { text-indent: 0; } Решит ли настройка реальную проблему? (В отличие от использования ::before, чтобы скрыть симптом проблемы.)

3. Вы можете использовать отрицательное левое поле для перемещения «=>» и положительное правое поле для изменения отступа абзаца.

Ответ №1:

Привет, можете ли вы, пожалуйста, проверить, действительно ли это полезно для вас, я просто удаляю текстовый отступ тега p и изменяю ul.b li p::перед левой позицией Добавьте текстовый отступ в элемент ul.b li p

 body {
    text-align: justify;
    hyphens: auto;
    margin-left: 3rem;
}  
.content {
    width: 40rem;
    background-color: yellow;
}  
p {
    width: 15rem;
    margin: auto;
    margin-top: 0.6rem;
    background-color: lightgreen;
    padding: 0;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1.4rem;
    text-align: justify;
    hyphens: auto;
    word-break: break-word;
    padding: 5px;
}

ul {
    list-style-type: none;
    margin: 1rem;
    padding: 0;
}  
ul.b li p::before {
    content: "=>";
    font-weight: bold;
    position: relative;
    left: -10px;
}  
ul.b li p {
    text-indent: -22px;
}  
.bluetable {
    background-color: #9FF;
    border: 2px solid black;
}  
td {
    margin: 14rem;
    border: 1px dashed green;
}