CODEWITHSUNDEEP
htmlcss
Karthik N
Karthik N

Reputation: 535

How to write ::before / ::after inside anchor tag

How to write ::before inside anchor tag like this.

enter image description here

Upvotes: 4

Views: 16922

Answers (3)

Divyanshu Maithani
Divyanshu Maithani

Reputation: 14986

What you see here is a CSS pseudo-element.

::before pseudo-element can be used to insert some content before the content of an element. eg - the following code will insert This comes before... before every paragraph.

p::before {
  content: "This comes before...";
}
<p>This is a paragraph</p>
<p>This is another paragraph</p>

For more information on CSS pseudo-elements, refer to this link.

Upvotes: 5

Sachith Wickramaarachchi
Sachith Wickramaarachchi

Reputation: 5862

which is used in CSS2 and The ::before selector inserts something before the content of each selected element or elements.

Use the content property to specify the content to insert.

Also have ::after which selector use to insert something after the content.

CSS

<style>
    p::before { 
    content: "User Name";
    background-color: yellow;
    color: red;
    font-weight: bold;
}
</style>



<body>

<p>Karthik N </p>
<p>Sachith MW </p>

</body>

The Output will be displayed as follows :)

enter image description here

Upvotes: 2

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

::after and ::before are called psuedo elements.

::after and ::before lets you add some content to an element using the content property.

Example

a::before {
  content: " Before content";
  margin-right: 10px;
}
a::after {
  content: "After content";
  margin-left: 10px;
}
<a href="#">Click Here </a>

Upvotes: 1

Related Questions