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

Question

I'm using :after pseudo-element to show the separator for the title for a card like below.

 .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> 

The problem is the separator displays correctly at normal size but when screen resizes, the separator size remains the same though the container size (lock-separator) varies based on the screen size as the font-size for body is getting changed through @media.

Please suggest how to resize the separator size. Is this the right method to have separator placed like this?

EDIT: As per the comment suggested, changed the element from span to div for block display. Still the problem is same. As seen below, the expectation is to match the height of the separator to lock icon. The heights of the separator and container varies as per pictures 2 & 3.

Answer 1

My proposal: use ::pseudo on the element which size varies. In this demo, I chose to vary the dimensions of the .media (would be the lock icon in your case) which affects its ::after but it can be switched to be ::before of the text on the right (positioned as left: negative-value; ).
As absolute positioning is involved, you've to make sure there's enough space between icon and text where the separator will be displayed.

➡️ 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>