This question already has answers here:
Can you add line breaks to the :after pseudo element?
(4 answers)
Closed 7 years ago.
I need to place an i element that renders an icon, after a paragraph, but when I use the pseudo element "after" I only get pure html and not the icon. How can I get the icon rendering instead of the html text? Thank you.
.myDiv p:after {
content: '<i class="towerIcon"></i>';
}
RESULT
Lorem ipsum dolor sit amet, consectetur adipiscing<i class="towerIcon"></i>
You have to put the CSS value of the icon. In this example I use Font Awesome.
div p:after {
content: '\f002';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin-left:5px;
color:red;
}
Here is the fiddle : http://jsfiddle.net/uzu7u56h/1/
You can't render HTML in :after/:before pseudo selectors. What you can however do is style :after directly, for example:
.myDiv p:after {
content: '';
/* Other styling stuff here - optionally can put text into content property above too */
}
Related
This question already has answers here:
Add line break to ::after or ::before pseudo-element content
(8 answers)
Closed 6 years ago.
I am using the css after:: selecter to display texts. What I want to do is simply add a tag before this display. Cant get it to work
H2::after {
content: " <br>posted by me";
font-size: 14px;
}
<H2>Hello</H2>
you cannot add html tags inside content:"" of pseudo-element.
use display:block on the :after pseudo-element and you will get the desired result . see below :
H2::after {
content:"posted by me";
display:block;
font-size: 14px;
}
<H2>Hello</H2>
let me know if it helps
or you could use JQ if you REALLY want to include HTML tags
$("h2").after("<span style='color:red;font-style:italic'>posted by me</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<H2>Hello</H2>
If you're looking to break the "::after" onto a new line why not add a "display:block" rule?
h2::after{
content:"posted by me";
font-size:14px;
display:block;
}
I'm editing a wordpress site that I dont have access to any of the HTML and only css. I need to input just two lines of text sort of like a "div". Is there any way to do this by only using CSS?
You can use :before or :after pseudo elements like this.
p:before {
color: red;
display: block;
content: 'this is from css';
}
<p>hello there</p>
Could you do it with :before or :after pseudo elements?
div.class-name:after {
content: 'text goes here';
display: block;
[style further as necessary]
}
This question already has answers here:
Is there any way to make the HTML underline thicker?
(5 answers)
Closed 8 years ago.
I have some bold text and would like to underline to appear bold as well.
HTML
<p>Home Page</p>
CSS
p {
text-decoration: underline;
}
jsFiddle
I tried several thing but they didn't work well.
You can use border-bottom with some padding:
display:inline-block;
border-bottom:solid 2px red;
padding-bottom:2px;
JSFiddle
Edit:
To achieve the effect you want, you can wrap the text with a <span>: JSFiddle
One possible approach is to use pseudo-element :after to mimic border. Benefit in this case is that it's easy to control "border" offset with margin-top. For example:
p {
display: inline-block;
}
p:after {
content: '';
display: block;
height: 2px;
background: red;
margin-top: -1px;
}
<p>Home Page</p>
This question already has answers here:
How to make my font bold using css?
(10 answers)
Closed 8 years ago.
Answers to this question show how to prepend/append text to a HTML element contents using CSS. Is there a way to make the CSS-added text bold without making the original HTML element contents bold as well?
Sure:
.OwnerJoe:before {
content: "Joe's Task:";
font-weight: bold;
}
Try:
#foo:after
{
content: 'hello!';
font-weight: bold;
}
Fiddle
Try this:
<div class="test">stuff</div>
.test{
border:1px solid #000;
}
CSS:
.test:before {
content: "more stuff";
background:red;
font-weight:bold;
}
Fiddle
All the information was in the link you posted, by the way. You just needed to add the font-weight to the right area.
That is of course possible
Just set appropriate styles to your pseudo element.
<span>World</span>
And the CSS:
span:before {
content: "Hello";
font-weight: bold;
}
Here's a working JSFiddle.
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 7 years ago.
Trying to make information about image below it. But have A problem... Pseudo element is not visible..
<img info="hey guys" src="http://i024.radikal.ru/1211/4c/809c7c2dfa74.jpg">
<div info="I'm working, but I'm inside the block"></div>
div {
height: 100px;
margin: 10px;
background: yellow;
}
div[info]::after, img[info]::after {
content: attr(info);
display: block;
margin: 3px;
color: black;
font-style: italic;
}
Jsfiddle DEMO
Thanks.
img elements can't have pseudo elements, because they can't have children—::before is inserted within the element. It would look like this:
<img><before></img>
Or at least itt isn't defined by the spec
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Pseudo elements are appended/prepended to the element's contents. Since an <img> (and an <input> for instance) has no contents, it cannot have pseudo elements applied on it.