CSS text-decoration: line-through

Hiệu ứng CSS này thường dùng cho Giá sản phẩm cũ, sẽ bị gạch ngang, điểm khác biệt ở đây là màu của đường line sẽ khác với text so với đoạn css text-decoration: line-through thì đẹp hơn nhiều. Bạn cần các dòng lệnh sau đây

HTML:

<div id="example">
    this is example
    <span></span>
</div>

CSS:

#example{
    color:#ccc;
    font-size: 20px;
    position: relative;
    display: inline-block;
}

#example span {
    position: absolute;
    width: 100%;
    border-top: 1px solid red;
    left: 0;
    top: 50%;
}

Xem demo tại: http://jsfiddle.net/amkrtchyan/RHPHX/1/

Tin tức khác