Как я могу оформить псевдоэлемент как заголовок абзаца?
Мы используем 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>
Стиль (SCSS):
p.note {
&::before {
float: right;
}
position: relative;
&[title]::after {
content: attr(title);
position: relative;
top: 0;
left: 0;
}
}
.icon::before {
content: "@";
}
Поскольку мы используем иконочные шрифты Icomoon, где content установлен в :before, заголовок должен быть в :after.
- мы не будем менять IconFont, поэтому иконка должна остаться
:before - никакой дополнительной отвлекающей разметки в уценке, поэтому нет HTML-оболочки
- нет Javascript
Можно установить абсолютное позиционирование для заголовка, но это будет слишком узко для самого текста абзаца, так как нельзя установить отступ.
Теперь, как можно оформить блок с :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>На что это похоже: Как это должно выглядеть:
попробуйте сетку jsfiddle.net/jrLua3xf для удовольствия от сетки :)
@ G-Cyrillus, но больше нет плавающего поведения для @ ;) .. плавающая часть делает его немного сложным
@TemaniAfif Сделайте так, чтобы он занимал 2 строки jsfiddle.net/hcb7agow/2 ... или нет ;)
@ G-Cyrillus Хорошая идея с grid, однако она ломается, когда внутри абзаца есть теги (например, em / code), они перемещаются в другой столбец / строку. Поиграюсь с сеткой, еще не пользовался
да, это так (тоже flex), каждый фрагмент текста оборачивается в виртуальный тег, а затем устанавливается в ячейке или обрабатывается браузером как один гибкий дочерний элемент;)
Ответы 2
Сумасшедшая идея с использованием shape-outside. Хитрость заключается в том, чтобы использовать before для заголовка, к которому вы применяете float, и after для значка с 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>Спасибо за ваш ответ :-) Однако ::before уже используется значком, поэтому я не могу использовать его таким образом, и я старался избегать изменения шрифта или изменения CSS каждый раз, когда он обновляется. Единственный «бесплатный» псевдоэлемент — это ::after. Также я только что проверил, несколько вложенных псевдоэлементов не поддерживаются (например, ::before::before).
As we are using Icomoon icon fonts, where the content is set in :before, the title must be in :after., а ваша идея очень классная =)) Респект!
@nonsensation добавил еще одну идею;)
так как сетка недостаточно помогает, давайте вернемся назад во времени с 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>
Вопросы, требующие справки по коду, должны включать кратчайший код, необходимый для его воспроизведения, в самом вопросе, желательно во фрагменте стека. Хотя вы предоставили ссылку, если она станет недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с той же проблемой. См. Что-то на моем сайте/примере не работает, могу я просто вставить ссылку.