1. 程式人生 > >hover效果經過 after偽類時寫法

hover效果經過 after偽類時寫法

<div>測試</div>

新增偽元素 ,偽元素不能直接hover,可以給父元素div新增hover效果,然後改變偽元素樣式

寫法:  元素:hover::after{ 樣式 }

div {
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;

}
div::after {
    content:"";
    position:absolute;
    top:50px;
    right:-5px;
    border-left:5px solid #ccc;
    border-top:5px solid  transparent;
    border-bottom:5px solid transparent;
}
div:hover::after {
    border-left:5px solid red;
}
div:hover {
    background-color:red;
}