我可以更改在：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>