html - 如何将伪元素设置为段落的标题?
问题描述
我们正在使用 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>
解决方案
使用 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>
推荐阅读
- html - 如何使用变换属性移动锚元素下的三角形?
- mysql - 如果引用记录不存在其他插入,我如何创建表?
- c - 对“__libm_sse2_sincos”的未定义引用和对“__libm_sse2_pow”的未定义引用
- c# - 从服务器 asp.net core 404 响应下载文件
- javascript - 光滑滑块中的项目未正确呈现
- twitter-bootstrap - 我用引导程序制作了 4 列,但我希望它们之间有一些边距,但是第 4 列将转到下一行,我该如何解决这个问题?
- sql-server - 选择后如何对N条记录进行排序?
- firebase - Recyclerview 无法让我的代码显示来自多个用户创建的多个键的记录
- java - 如何避免在jpa中从多对多中删除实体
- django - Django,如何获取cookie过期的时间