Как создать цветной прямоугольник слева от wp-надпись-текст

#css #wordpress

Вопрос:

На сайте WordPress в сообщении в блоге я пытаюсь добиться такого эффекта, чтобы цветной прямоугольник был слева от подписи к изображению:

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

Вот все, что у меня сейчас есть.

 div.wp-caption p.wp-caption-text {  border-top: 40px solid;  padding-left: 12px;  border-color: #008ed4;  }

1. Вы пробовали указать ширину и высоту прямоугольника?

2. Пожалуйста, не могли бы вы показать соответствующий HTM и любой другой связанный CSS, т. Е. как ваш синий прямоугольник, так и подпись.

Ответ №1:

Я бы предложил использовать :before селектор и попробовать что — то вроде этого:

 div.wp-caption p.wp-caption-text {  position: relative;  margin-left: 60px; }

 div.wp-caption p.wp-caption-text:before {  content: '';  display: block;  height: 8px;  width: 46px;  left: -60px;  position: absolute;  background-color: #008ed4;  }

Использование css :перед селектором и присвоение ему a content: ''; позволяет вам, по сути, подделать добавление элемента в dom с помощью css.

Я не уверен, что это именно то, чего вы хотите, но я думаю, что этого будет достаточно, чтобы вы начали.

Ответ №2:

Вы можете сделать отступ в первой строке подписи и вставить фоновое изображение (линейный градиент), которое входит в этот отступ.

Это означает, что подпись будет заключена под синим прямоугольником, и я не совсем уверен, хотите ли вы этого или нет (если нет, то предложение @BrettEast о псевдоэлементе выглядит многообещающим).

 div {  text-indent: 2.5em;  background-image: linear-gradient(#008ed4, #008ed4);  background-size: 2em 0.75em;  background-position: left 0.25em;  background-repeat: no-repeat; }

 lt;divgt;aaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aa aaaaaaaaa lt;/divgt;