我可以更改在：e之后/ before伪元素内定义的内容字符串的高度吗？

Question

我正在使用：after伪元素来显示卡片标题的分隔符，如下所示。

 .lock-flag { font-size: 1em; } .lock-flag .lock-icon { margin-right: 0.5em; } .lock-flag .lock-icon:after { content: "-"; } .lock-flag .lock-separator::after { content: "|"; color: #666; } 

 <div class="lock-flag"> <span class="lock-icon"></span> <span class="lock-separator"></span> </div> <span class="title">Title</span> 

问题是分隔符可以正常大小正确显示，但是当调整屏幕大小时，分隔符大小保持不变，尽管容器大小（锁分隔符）根据屏幕大小而有所不同，因为通过@media更改了正文的字体大小。

请提出如何调整分隔纸尺寸的建议。 这样放置分隔符是正确的方法吗？

编辑：根据建议的注释，将元素从跨度更改为div以显示块。 问题仍然是一样的。 如下所示，期望将分隔符的高度与锁定图标相匹配。 分离器和容器的高度根据图片2和3。

Answer 1

我的建议：在大小变化的元素上使用::pseudo 。 在此演示中，我选择更改.media的尺寸（在您的情况下为锁定图标），这会影响它的::after但可以将其切换为::before text（在右侧文本::before （位于left: negative-value; ）。
由于涉及绝对定位，因此必须确保图标和文本之间有足够的空间来显示分隔符。

Code️Codepen

 .parent { display: inline-flex; /* or flex */ justify-content: space-between; align-items: center; /* vertical aligning */ height: 100%; outline: 1px dotted #aaa; } .media { position: relative; display: block; width: 2rem; height: 2rem; margin-right: 2rem; background-color: #0888; } .media::after { content: ''; position: absolute; top: 0; bottom: 0; right: -1.2rem; display: block; width: 1px; /* height: 100%; can replace t:0 b:0 */ border-left: 1px solid #444; } .tall { width: 4rem; height: 4rem; } .title { margin: 0; } section { margin: 1rem; } section:not(:first-child) { margin-top: 1rem; } 

 <section> <div class="parent"> <span class="media"></span> <p class="title">Heading</p> </div> </section> <section> <div class="parent"> <span class="media tall"></span> <p class="title">Heading</p> </div> </section>