For a project I need to get the Font Awesome quote icons right before and after the <p> content. Right now it displays itself above and beneath it at all times.
Here is the HTML:
<blockqoute>
<p><strong>Text</strong></p>
</blockqoute>
And the CSS I'm using:
blockquote {
border: none;
&:before {
.fa();
content: #fa-var-quote-left;
position: relative;
display: inline-block;
}
&:after {
.fa();
content: #fa-var-quote-right;
display: inline-block;
position: relative;
float: right;
}
}
This is what I'm getting:
The qoute icons need to start right in front of the text, and right after too.
I'm using the CMS Typo3.
you need all your elements on the same block level.
while your :before is inline-block the following ´p´ is by default block, so every inline-element before or after are separated by newlines.
I assume you need to set
blockquote p { display: inline-block; }
You need to add the ::before and ::after pseudo-elements to the paragraph element, and remove the float from the after pseudo-element – because p is a block level element, they will be on their own, new lines if you apply the pseudo-elements to the containing block.
blockquote p {
&::before {
.fa();
content: #fa-var-quote-left;
}
&::after {
.fa();
content: #fa-var-quote-right;
}
}
The position and display properties are probably not needed, it depends on what other styles you will apply.
Related
I try add margin top and margin left, but not working.
<li>li 1 <br/> new line</li>
<li>li 2 <br/> new line</li>
And CSS
li {
list-style: none;
counter-increment: foo;
display: table-row;
}
li::before {
content: "-";
display: table-cell;
text-align: right;
padding-right: 5px;
}
https://jsfiddle.net/b5rtg568/
You cannot apply margins on a table-cell, also the way you are trying to accomplish your task seems to be pretty weird, try using CSS positioning techniques for the same result and in a better way like
Demo
Demo 2 (Using margin on li elements)
li {
list-style: none;
margin-left: 15px;
position: relative;
}
li::before {
content: "-";
position: absolute;
left: -10px;
}
Here, am using CSS positioning techniques to move the - prefixes outside the list item by using negative value for left property. Here, you can now use margin-top and margin-left properties for your li elements, and if you need you can also position the - accordingly.
Some tips, instead of wrapping the text using li you should be using p tags or <h2> or <h3> tags which will give more semantic meaning to your content and you won't have to use dirty <br> tags to separate your content in two lines because that will be accomplished automatically if you will use the above elements I suggested which are block level by default and will take 100% of the space.
Margin, padding, height will have no effect on 'table-row', hence you have to your li display property to 'block'.
in the code:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: absolute;
top:500px;
width:400px;
border:1px solid green;
}
.parent:before {
z-index:-1;
content:'';
position:absolute;
opacity:0.5;
width:400px;
height:200px;
background-image:url('wallpaper324845.jpg');
border:1px solid red;
}
.child {
Color:black;
border:1px solid black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Hello I am child</div>
</div>
</body>
</html>
I'm trying to create a transparent background as described in this thread: How to set opacity in parent div and not affect in child div?.
Looking at the code from the 4th answer. How does this work, I'm confused with the use of .parent and .parent:before. I would think that this would create a .parent:before element before every parent element. Really confused how does this work?
:before creates a virtual content using CSS, so in the above case, author uses below snippet means
.parent:before{
z-index:-1;
content:'';
position:absolute;
opacity:0.5;
width:400px;
height:200px;
background-image:url('wallpaper324845.jpg');
border:1px solid red;
}
He is creating a virtual element using :before, which he then positions absolute, assigns some dimensions, and assigns the background, to make sure that it stays below the div content, he uses z-index: -1;
In other words, :before, :after are nothing but assume nesting two span elements inside your div, but by using pseudo elements, you don't need to have span as you can achieve the same thing with the pseudo elements.
Consider you have something like this
<div>
Hello
<span></span>
</div>
div {
position: relative;
}
div span {
position: absolute;
width: 100%;
height: 100%;
background: #f00;
z-index: -1;
left: 0;
top: 0;
}
Demo
Can be also achieved using :before or :after, markup stays the same but CSS goes like
div {
position: relative;
}
div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #f00;
z-index: -1;
left: 0;
top: 0;
}
Demo
So, it just saves you one empty element in your HTML, but if you look at the above CSS, am using content property which is ALWAYS associated with :before or :after, and yes, it is required, even if you keep it blank.
Also, note that :before and :after generated content are inline, so inorder to make height, width work, you need to explicitly mention display: block; or display: inline-block; if you want to make it block level, but in this particular case, you won't need that as the pseudo element is positioned absolute
div:after {
content: "Hello";
margin-top: 20px; /* This wont work as pseudo is inline by default */
}
Demo
So make it block or inline-block
Demo
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
Below is a document tree with HTML as root.
HTML
.HEAD
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI
For example, the following rule inserts the string "Note: " before the content of every P element whose "class" attribute has the value "note":
p.note:before { content: "Note: " }
The formatting objects (e.g., boxes) generated by an element include generated content. So, for example, changing the above style sheet to:
p.note:before { content: "Note: " }
p.note { border: solid green }
would cause a solid green border to be rendered around the entire paragraph, including the initial string.
The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.
For example, the following rules insert an open quote mark before every Q element. The color of the quote mark will be red, but the font will be the same as the font of the rest of the Q element:
q:before {
content: open-quote;
color: red
}
In a :before or :after pseudo-element declaration, non-inherited properties take their initial values.
So, for example, because the initial value of the 'display' property is 'inline', the quote in the previous example is inserted as an inline box (i.e., on the same line as the element's initial text content). The next example explicitly sets the 'display' property to 'block', so that the inserted text becomes a block:
body:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
The :before and :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element.
For example, the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; }
<p> Text </p> p:before { display: block; content: 'Some'; }
...would render in exactly the same way as the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; }
<p><span>Some</span> Text </p> span { display: block }
Similarly, the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; }
h2:after { display: block; content: 'Thing'; }
<p> Text </p>
...would render in exactly the same way as the following document fragment and style sheet:
<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }
<p> Text </p>
Basically, :before (like :after) is a CSS pseudo-element. So it's almost like a HTML inline element. Almost.
To play with pseudo elements, you need to give it a content property (empty string in most cases). Note that it's an inline element by default, so it can't have width / height. You need to set display: block (or inline-block, or whatever).
I think you missed to set the relative position on the parent element (.parent). There it is :
.parent{
position: relative;
top:500px;
width:400px;
border:1px solid green;
}
Try looking at this article. it explains how :before and :after pseudo selectors work:
http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
Can you please let me know how I can force CSS to make the line-through property wider than element width?
For Example
<h3 style="text-decoration:line-through">50</h3>
and result looks like now how I can make the line wider than element to be more obvious?
Like
You can use which is a cheesy way to go for
<div> HELLO </div>
Demo
Or you can do is, use :before and :after pseudo with content property
Demo
div {
text-decoration:line-through;
}
div:before,
div:after {
content: "\00a0\00a0";
}
Note: Using a general selector here, consider using class or an id to target the element specifically, also, if your text is between other text, consider wrapping that in a span and than use :before and :after over span.
Briefing an answer here with solution that uses CSS Positioning techniques, using which you can also control the thickness of the strike through..
Here, am positioning the child element absolute to the parent element. So make sure you declare position: relative; on parent. Rest, :after pseudo handles the rest and also be sure that you use content: "";, though it's blank, it's mandatory.
Demo 3 (Using CSS Positioning)
div {
position: relative;
display: inline-block;
padding: 0 10px;
margin: 10px;
}
div:after {
content: "";
position: absolute;
border: 2px solid #000;
top: 50%;
margin-top: -1px;
width: 100%;
left: -2px;
}
padding: N px;
line-height: N px;
in html
Nested Div's <div><div></div></div>
Here is the simple html
<p> some text here </p>
more
and the css I tried
p+a{
color: #f00;
display: inline-block;
/* also tried float: left; */
}
To bring up the output as this
some text here more
I want more in the line of p.
p is a block level element. So you couldn't inline to a. Therefore you need to style your p as display: inline; or display: inline-block; and then give display: inline; or display: inline-block; to a
here is the fiddle.
You need to give the paragraph display: inline-block; as well, because it is a block-level element. Therefor it automatically takes the available space and pushes the anchor to a new line. Also you'll need to add the closing " to your href-attribute.
(If you're able to manipulate the markup of the paragraph – just add the anchor inside of it.)
HMTL:
<p>some text here</p>
more
CSS:
p {
display: inline-block;
}
p + a {
color: #f00;
display: inline-block;
}
Note: Please use classes to style things like that instead of elements. Add a class to your anchor and select it with p + .read-more or something like that.
just add the below css to your stylesheet.
p{ dislpay:inline-block;}
P is a block level element make it inline-block so next inline element come up next to p tag.
use this code
CSS:
p > a {
color: #f00;
display: inline-block;
font-size: 18px;
}
HTML:
<p>some text here more</p>
In the following case, how can I make it such that the text generated by the :after is outside the box of the span? (It currently is rendered inside, i.e. it makes the span element wider)
HTML
<span class="my">Boxtext</span>
CSS
span.my {
padding: 4px 8px;
background-color: red;
display: inline-block;
border-radius: 10px;
margin-left: 20px;
}
span.my:after {
content: " text that is supposed to come after the box";
}
I guess this is somewhat similar to list-style-position, where you can chose inside or outside...
I believe CSS content is considered part of the object against which it was rendered. You could make the argument that :after should have been named :append.
For your case you can try putting an extra element inside span.my:
<span class="my"><span>Boxtext</span></span>
span.my span { ... }
span.my:after { ... }
Or styling the content specifically.
span.my:after {
content: " text that is supposed to come after the box";
background-color: white;
position: absolute;
margin-left: 10px;
}
Just use position: absolute in the ::after {} pseudo-element's css:
span.my:after {
content: " text that is supposed to come after the box";
position: absolute;
left: 100%;
}
Remember, of course, to use position: relative; (or any other position value) on the parent span.my element.
JS Fiddle demo.
Also remember that as the ::after (and the ::before) pseudo-element inherits from the span to which it's 'attached' that it'll inherit the width, so that may need to be explicitly overridden in the CSS for that/those elements.