css ::after and ::before

使用::after伪元素读取自定义属性.

by basecss

HTML

<p><span class="tips tips-top" data-tips-content="提示内容提示内容">tips top</span></p>

<p><span class="tips tips-bottom" data-tips-content="提示内容提示内容提示内容">tips bottom</span></p>

<p><span class="tips tips-left" data-tips-content="提示内容提示">tips left</span></p>

<p><span class="tips tips-right" data-tips-content="提示内容提示内容提示">tips right</span></p>

CSS

p {
    margin: 20px;
    padding: 30px;
    text-align: center;
}
.tips {
    position: relative;
    cursor: pointer;
}
.tips::before, .tips::after{
    position: absolute;
    white-space: nowrap;
    display: none;
}
.tips::before {
    content: '';
}
.tips::after {
    content: attr(data-tips-content);
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    background: rgba(0,0,0,0.6);
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
}
.tips:hover::before, .tips:hover::after {
    display: block;
}
.tips-top:hover::before {
    top: -6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: rgba(0,0,0,0.6) transparent transparent transparent;
}
.tips-top:hover::after {
    top: -34px;
    left: 50%;
    -webkit-transform: translateX(-50%);
}
.tips-bottom:hover::before {
    bottom: -6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(0,0,0,0.6) transparent;
}
.tips-bottom:hover::after {
    bottom: -34px;
    left: 50%;
    -webkit-transform: translateX(-50%);
}
.tips-left:hover::before {
    top: 50%;
    left: -10px;
    -webkit-transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent rgba(0,0,0,0.6);
}
.tips-left:hover::after {
    right: 100%;
    margin-right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
}
.tips-right:hover::before {
    top: 50%;
    right: -10px;
    -webkit-transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 6px 5px 0;
    border-color: transparent rgba(0,0,0,0.6) transparent transparent;
}
.tips-right:hover::after {
    left: 100%;
    margin-left: 10px;
    top: 50%;
 ...