How Can I Use CSS :after to Add a Glyphicon Element to an Input


Tags: css,glyphicons

Problem :

I have an <input> element, and I can't modify the HTML around it, but I want to add a glyphicon (<i class="glyphicons glyphicons-some-icon"/>) inside of it. I was hoping to do it with CSS, but I can't seem to get :after to work. I thought something like the following would generate that element:

#my-input {
    content: attr(class, 'glyphicons glyphicon-some-icon'); 
    content: '<i/>'; 
}

but it doesn't. Could anyone who understands :after better explain how I can generate the desired <i class="glyphicons glyphicons-some-icon"/> using :after?



Solution :

:before and :after are applied inside a container, which means you can use it for elements with an end tag.see explanation

See below example. to achieve what you want.

NOTE: parent position is relative so that chilled absolute position will take top and bottom depending on parent.

.myInput:after {
  font-family: FontAwesome;
  content: "\f0a9";
  position: absolute;
  top: 3px;
  left: 7px;
}
.my{
position:relative
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />

<div class="my">

  <div class="myInput">
    <input type="text" />
  </div>

</div>

OR

.mystyle:before {
  font-family: FontAwesome;
  content: "\f0a9";
}
.myInput {
  position: relative;
}
.myInput div {
  position: absolute;
  top: 3px;
  left: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myInput">
  <input class="mystyle" type="text" value="" />
  <div class="mystyle"></div>
</div>


    CSS Howto..

    How to properly use css will-change property?

    How to Find and replace class with javascript (No JQ)

    HTML, CSS: how can I merge these divs in order to use float:left property on their children?

    How does css scale transform affect document flow?

    How to switch between css with jquery

    How to align image within nested div<> with spaces in div names

    How to hide repeated content from search engines with CSS?

    How to stretch a background-image with css

    How to apply css to asp.net LinkButton?

    HTML/CSS: how to put text both right and left aligned in a paragraph

    How can i refer to all of my tags in CSS?

    jQuery hide / show class not changing css for future added elements

    How to keep two divs and images inside them to be side by side on browser resize?

    How to style a button inside asp dropdown

    How to generate a source map for minified CSS generated by dotless

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size

    How to style the

    How to select the first, second, or third element with a given class name?

    How to navigate from one field to another field using Enter Key function in MVC5

    How to check if svg element supports css transform

    How to make a bootstrap modal fade in from the bottom?

    How to produce a green check mark on the menu tabs by using before and after selectors in css ?

    How to Test CSS/HTML/jQuery?

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to add image after button/div css?

    How to slide an element without removing it from DOM ( A psudo slide maybe)?

    How to set a background-color to element which has the same id with anchor of url?

    how to overlap two div in css?

    How to format XML file with CSS?

    How to put background-color only a section of a select? CSS