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>
Related
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.
I wrote some CSS for a tool tip
.toolTip{
display:inline;
position:relative;
}
.toolTip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
HTML
<p title="tester" class="toolTip">test</p>
<img src="images/people/Tapolci_Jeff_abg_web.png" class="toolTip" title="Jeff T." alt="Jeff Tapolci" />
It only works with the text, but not the image. How can I fix this?
Fiddle
It is important to note that img elements are replaced elements so psuedo elements such as :before or :after will not work unfortunately. You should wrap it in, say, a span and add the class to that.
Demo Fiddle
Replaced Elements:
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independant of the CSS. Typical replaced elements
are <img>, <object>, <video> or forms element like <textarea>,
<input>. Some elements, like or are replaced elements
only in specific cases. Object inserted using the CSS content
properties are anonymous replaced elements.
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/
I've got a button (<button> tag, but rendered like a link) inserted at the end of a line of text. I need to make a clear separation between the button and the text, so I'm using a :before pseudo element with a content: "—"; property to achieve that. So far so good.
Here is an example: http://jsfiddle.net/Anto/UPjQL/
The problem is that the content of the pseudo element behaves just like the button itself: when hovering it, the default cursor becomes a pointer cursor and the element is underlined. That makes sense, but I'd like to prevent that behavior and let it appear just like a regular text char.
Any idea ?
I know that wrapping the button inside, say, a span element and then giving the :before properties to that wrapper would be a more elegant solution, but in this case I can't afford it.
Take a look at the fiddle http://jsfiddle.net/joplomacedo/UPjQL/3/
.button-rendered-as-a-link {
position: relative; <-------------
border: none;
padding: 0;
margin: 0;
background: none;
-moz-border-radius: none;
-webkit-border-radius: none;
border-radius: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #8A89BA;
font-weight: bold;
left: 2em; <-------------
}
.button-rendered-as-a-link:hover {
text-decoration: underline;
cursor: pointer;
}
.button-rendered-as-a-link:before {
content:" — ";
position: absolute; <-------------
right: 100%; <-------------
padding: 0 5px;
color: grey;
cursor: default !important;
pointer-events: none; <-------------
}
The arrows represent the stuff I've added.
I've basically removed the pseudo element from the flow by using position: absolute. That made the button's width equal to what it would be without the psuedo element, and therefore, it's underline equal to no more than that width. The left and right properties put them back in place.
Then, as to not trigger a hover on the button I set the pseudo element's pointer-events to none. You can read more about it here https://developer.mozilla.org/en/CSS/pointer-events/.
I would just use JavaScript in your case, the insertBefore method should do the trick quite nicely!
var buttons = document.getElementsByClassName("button-rendered-as-a-link");
for (key in buttons)
try{
buttons[key].parentNode.insertBefore(document.createTextNode(" - "),buttons[key]);
}catch(e){}// this may throw an error?
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.