如何将 pseudo-element 设置为段落标题的样式?
How can I style a pseudo-element as the title of a paragraph?
我们正在使用 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
可以为标题设置绝对定位,但这对于paragraph-text本身来说太窄了,因为无法设置边距。
现在,如何将 :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>
外观:
它应该是什么样子:
使用 shape-outside 的疯狂想法。诀窍是将 before 用于您应用浮动的标题,将 after 用于具有 position:absolute
的图标,然后 shape-outside 将创建一个特定的形状以模拟图标周围的浮动行为。
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>
由于 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>
我们正在使用 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
可以为标题设置绝对定位,但这对于paragraph-text本身来说太窄了,因为无法设置边距。
现在,如何将 :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>
外观:
使用 shape-outside 的疯狂想法。诀窍是将 before 用于您应用浮动的标题,将 after 用于具有 position:absolute
的图标,然后 shape-outside 将创建一个特定的形状以模拟图标周围的浮动行为。
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>
由于 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>