::before{content""} or::after{content""} is a very useful virtual selector when you do not have direct control over HTML (plug-in element said. exe) and want to feed attributes common to such elements.
Use the following properties:: Before, and content "" To put the contents you want to insert.
:: Before and:: After usage in real CSS
<div class="reply">Comments</div>
If you want to put something in front of the class name reply above, you can do so by adding CSS to it.
.reply::before {
Content: "This is a"
}
This content"" If you want to give a property to the element, then you can do it.
.reply::before {
Content: "This is";
Font-weight: Bold;
Font-style: italic;
}
The text as well as the background: url("image address") no-repeat; Insert the image address as, width:16px;height:16px; You can also set width and height to include images by using the height: 16px; and so on, or use CSS icons such as the Awesome CSS icon.
.reply::before {
Content: "f044";
Font: normal normal normal 16px/1 fontawesome;
Margin-right: 5px;
}
(Note that CSS emoticons in front of the comments in the example are actually used in the Gkkmon site Comments window.)
:: Before and:: After applications
You can use this feature to personalize your site or blog in a variety of ways. You can insert an icon in front of certain elements, such as the one used by Gkkmon.<li></li>You can also make the same list.
The best part of all is that you can change parts of the plug-ins that you don't know or what HTML elements you didn't want to change (Gkkmon) that you're using on the site (the Dog Honey-mon) is a plugin for WordPress Jetpack (Jet pack).
After you have applied this and figured out the name of the class, such as right click → element inspection, to replace the site of your own, let's customize it to your taste.