:hover选择器
选择鼠标浮动在上面的元素，并设置鼠标浮动在它上面时的样式
a:hover
{
background-color:yellow;
}
/*当鼠标浮动在a标签上时，a标签的背景颜色变成黄色*/
::before, ::after伪标签
这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）。
<STYLE>
a {
position: relative;
left:20px;
margin-left:50px;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
/*padding: 5px 10px;*/
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }/*左中括号*/
a:hover::after { content: "\5D"; right: -20px; }/*右中括号*/
</STYLE>
</head>
<body>
<a>WAFTRUE</a>
<a>SUMPTUOUS</a>
</body>
网友评论