Example of implementing hollow triangle arrow and X icon with after pseudo element

In the front-end design draft, you can often see close buttons in the shape of 'X', '>' and hollow arrow icons in three other directions. There are many ways to implement CSS. After trying it, I found that it is not easy to remember. Today I will write a simple method to implement it using the after pseudo-element.

1. Close icon

HTML part

<span class="close"></span>

CSS part

.close{
    display: inline-block;
    width: 14px;
    height: 1px;
    background: #95835e;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.suClose:after {
    content: '';
    display: block;
    width: 14px;
    height: 1px;
    background: #95835e;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

The principle is to use the span element and the after pseudo-element to draw two straight lines, and use the transform attribute of CSS3 to rotate them separately to achieve the effect of intersection.

2. Hollow triangle arrow

HTML part

<span class="arrowUp"></span>

CSS part

.arrowUp:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #656565;
    border-right: 1px solid #656565;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

HTML part

<span class="arrowUp"></span>

CSS part

.arrowUp:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #656565;
    border-right: 1px solid #656565;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

The principle is to use the after pseudo-element to draw a rectangle, depicting only the top and right borders, thus forming an arrow shape, and then use the transform attribute to adjust the angle to achieve different orientations. Here we give examples of two directions. For the other two directions, you only need to change the angles.

This is the end of this article about the example of using the after pseudo-element to implement a hollow triangle arrow and an X icon. For more information about how to implement a hollow triangle arrow and an X icon with after, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!