Application of Pseudo-Elements

In CSS3, in order to distinguish between pseudo-classes and pseudo-elements, it is stipulated that pseudo-elements use 2 colons

:first-line   向文本的首行设置特殊样式

:first-letter   向文本的首字母设置特殊样式

只用于块级元素

::before ::after Insert new content before and after element content

content属性指定要插入的内容

且必须设置content：“”（空值也可）

插入的内容默认是inline元素

伪元素的content 属性可以是：url-设置某种媒体（图像，声音，视频等内容），string-设置Content 到你指定的文本

Disadvantages:
1. Pseudo-elements are not really reflected in the content of the document, but only in visual effects, so you cannot add practical content to the pseudo-elements, and this part of the content will not be crawled by search engines

usefulness

1) clear float

(The child elements in the parent box are all set to float, do not occupy the standard flow, so that the height of the parent box is 0, you need to clear the float, so that the parent container can automatically "clear" the float of the child elements, so that The position of the floating sub-element can be identified, and there will be no display errors.)

.div::after {
    
    
    content:"";
    height:0;
    display:block;
    clear:both;
}

2) Adding a small icon
is often used with positioning

3) Realize the effect of sliding out the upper line when the mouse is hovered in the navigation bar

HTML

 <div class="navone">
            <p><a href="#">学生</a></p>
            <p><a href="#">教职工</a></p>
            <p><a href="#">校友</a></p>
            <p><a href="#">访客</a></p>
            <p><a href="#">招聘</a></p>
            <p><a href="#">捐赠</a></p>
        </div>

insert image description here

CSS

> .navone { display: flex;  }      .navbar p { height: 45px;
> line-height:45px; margin:0px; margin:0 10px; font-size: 14px; } 
> 
>  /*CSS3鼠标滑过导航出现下划线动画特效 */
>   .navbar a::before{
>    			 opacity: 1;
>    			 content:"";
			>     width:0;
			>     position: absolute;
			>     border-top:3px solid white;
			>     top:-3px;
			>     left:0%;
			>     transition: width .2s ease-in-out; 
			}	
 .navbar a:hover::before {
>     			width:100%;
>      }

insert image description here