Как я могу стилизовать псевдоэлемент в качестве заголовка абзаца?
Мы используем Markdown (Kramdown) для создания статического веб-сайта. Для инфобоксов мы можем аннотировать абзацы и получить следующие результаты:
{:.note .icon-check title="This is a title"}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
А это преобразованный HTML:
<p class="note icon-check" title="This is a title">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
CSS
p.note {
&::before {
float: right;
}
position: relative;
&[title]::after {
content: attr(title);
position: relative;
top: 0;
left: 0;
}
}
.icon::before {
content: "@";
}
Поскольку мы используем icon fonts Icomoon, в которых содержимое установлено в :before, заголовок должен быть в :after.
- мы не будем менять
Iconfont, поэтому иконка должен оставаться в:before - нет дополнительной отвлекающей разметки в markdown, поэтому нет HTML-оболочки
- нет Javascript
Можно установить абсолютное позиционирование для заголовка, но это будет слишком близко для paragraph-text, так как margin не может быть установлен.
Здесь JSFiddle
Теперь, как можно стилизовать поле с помощью :after в качестве заголовка вверху, который также хорошо выглядит, когда заголовок не установлен?
main {
width: 50%;
display: block;
place-items: center;
margin: auto;
}
p.note {
border: 3px solid red;
border-radius: 3px;
padding: 1em;
position: relative;
}
p.note::before {
margin: auto 0 0.5em 0.5em;
float: right;
}
p.note[title]::after {
content: attr(title);
position: relative;
font-weight: bold;
top: 0;
left: 1em;
}
.icon::before {
font-size: 2em;
content: "@";
}<html>
<body>
<main>
<p class="note icon" title="This is a title">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
</p>
</main>
</body>
</html>Вот как это выглядит:
Как это должно выглядеть:
Свободный перевод вопроса How can I style a pseudo-element as the title of a paragraph? от участника @nonsensation.
Ответы (2 шт):
Безумная идея с использованием shape-outside. Трюк состоит в том, чтобы использовать :before для заголовка, где вы применяете float, и после для иконки, имеющего position: absolute, тогда shape-outside создаст определенную форму, чтобы имитировать поведение float вокруг значка.
main {
width: 50%;
display: block;
margin: auto;
text-align:justify;
}
p.note {
border: 3px solid red;
border-radius: 3px;
padding: 1em;
position: relative;
}
p.note::after {
margin: auto 0 0.5em 0.5em;
position:absolute;
top: 1em;
right: 0.5em;
}
p.note[title]::before {
content: attr(title);
display:block;
height:3.5em;
float:right;
width:100%;
text-align:center;
font-weight: bold;
shape-outside:polygon(0 0,100% 0,100% 100%,calc(100% - 3em) 100%,calc(100% - 3em) calc(100% - 2em),0 calc(100% - 2em));
/* To illustrate the shape */
background:
linear-gradient(rgba(255,255,0,0.3) 0 0) top/100% calc(100% - 2em) no-repeat,
linear-gradient(rgba(255,255,0,0.3) 0 0) bottom right/3em 3em no-repeat;
border:1px solid rgba(0,0,0,0.2);
/**/
}
.icon::after {
font-size: 2em;
content: "@";
}
.icon:not([title])::after {
display:none;
}
.icon:not([title])::before {
font-size: 2em;
content: "@";
margin: auto 0 0.5em 0.5em;
float:right;
}
<main>
<p class="note icon" title="This is a title">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
</p>
</main>
<main>
<p class="note icon" >
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
</p>
</main>Или основная идея, как показано ниже:
main {
width: 50%;
display: block;
margin: auto;
text-align:justify;
}
p.note {
border: 3px solid red;
border-radius: 3px;
padding: 1em;
position: relative;
}
p.note::before {
margin: auto 0 0.5em 0.5em;
float: right;
}
p.note[title]::after {
content: attr(title);
position: absolute;
font-weight: bold;
top: 0.5em;
left: 0;
right:2em;
text-align:center;
}
p.note[title] {
padding-top:2em;
}
.icon::before {
font-size: 2em;
content: "@";
}<main>
<p class="note icon" title="This is a title">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
</p>
</main>
<main>
<p class="note icon" >
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
</p>
</main>Свободный перевод ответа от участника @Temani Afif.
поскольку grid не помогает, давайте вернемся во времени с помощью display: table и display: table-caption, чтобы добавить еще один ответ и посмотреть, может ли это сработать и для вас;)
* {
box-sizing: border-box;
}
main {
width: 50%;
min-width:450px;
display: block;
place-items: center;
margin: auto;
}
p.note {
font-size:clamp(12px, 4vw, 30px);
border: 3px solid red;
border-radius: 3px;
padding: 1em;
display: table;
padding-top: 1.5em;
}
p.note::before {
margin: auto 0 0.5em 0.5em;
float: right;
font-weight:bold;
color:tomato;
}
p.note[title]::after {
content: attr(title);
font-weight: bold;
display: table-caption;
margin-bottom: -1.6em;
text-align: center;
padding-right: 3em;
}
.icon::before {
font-size: 2em;
content: "@";
line-height: 0.25;
}<main>
<p class="note icon" title="This is a title">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
</p>
</main>Свободный перевод ответа от участника @G-Cyrillus.