Menu Close

Let's put an icon with text and images freely with CSS:: Before,:: After

::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>

Comments

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"
  }
Comments

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;
  }
Comments

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;
  }
Comments

(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.

Comment (Information not required)

Posted in All, Wordpress

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.