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]
}
Related
I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements.
If so, how would I implement something like this with inline CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
You can't specify inline styles for pseudo-elements.
This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element.
Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.
As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default will be inherited by :before and :after from the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justify in an inline style attribute for a td element, it will be inherited by td:after. The caveat is that you can't declare td:after with the inline style attribute; you must do it in the stylesheet.
as mentioned above: its not possible to call a css pseudo-class / -element inline.
what i now did, is:
give your element a unique identifier, f.ex. an id or a unique class.
and write a fitting <style> element
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, but what inline css isnt..?
You can use the data in inline
<style>
td { text-align: justify; }
td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>
<table><tr><td data-content="post"></td></tr></table>
You can't create pseudo elements in inline css.
However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:
<parent style="background-image:url(path/to/file); background-size:0px;"></p>
<style>
parent:before{
content:'';
background-image:inherit;
(other)
}
</style>
sometimes this can be handy.
No you cant target the pseudo-classes or pseudo-elements in inline-css as David Thomas said.
For more details see this answer by BoltClock about Pseudo-classes
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes are a member of the family of selectors,
which don't occur in the attribute .....
We can also write use same for the pseudo-elements
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes and pseudo-elements the are a member of the family of selectors, which don't occur in the attribute so you cant style them inline.
Yes it's possible, just add inline styles for the element which you adding after or before, Example
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
As mentioned before, you can't use inline elements for styling pseudo classes. Before and after pseudo classes are states of elements, not actual elements. You could only possibly use
JavaScript for this.
If you have control over the HTML then you could add a real element instead of a pseudo one.
:before and :after pseudo elements are rendered right after the open tag or right before the close tag.
The inline equivalent for this css
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Would be something like this:
<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>
Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.
you can use
parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");
in css
el:after{
....
padding-top:var(--padding-top, 0px);
}
EDITED: If you have access to the stylesheet, you can pass the variable values inline and then, in your stylesheet, use the inherit value for the pseudo-element property you want to manipulate:
HTML
<div style="color: whitesmoke;">
</div>
CSS
div::before {
content: '';
color: inherit;
}
Useful for background images for example.
I want to add a visual indication of the HTML tag/element used on a page.
By tag/element I mean if it's an anchor tag I want to display an "a". Likewise if it's a Heading 2 I'd like to display "H2" or similar.
I know I can achieve a similar result using the CSS 'content:' property and pseudo-elements like so:
*:before {
content: attr(title);
}
But this only works for HTML attributes as far as I'm aware, and not the tag itself.
Ideally I'd want something like:
*:before {
content: tag();
}
Is there anything in CSS that can achieve this result?
I can't use any javascript. CSS only.
My only other thought is to map all the tags/elements out in my CSS like so:
a:before {
content: "a"
}
p:before {
content: "p"
}
h1:before {
content: "h1"
}
h2:before {
content: "h2"
}
...
...and so on for all tags/elements. But I'm looking for a more dynamic way of doing it.
This is an occasion where a preprocessor like Sass would come in handy. Then you could simply do:
$tags: a, p, h1, h2, etc;
#each $tag in $tags {
#{$tag}:before {
content: "#{$tag}";
}
}
jsFiddle demo
Otherwise, the answer to your question (Is there anything in CSS that can achieve this result?), is probably no.
Not 100% sure if this is what you're after, but try this:
CSS
pre code[class]:after {
content: 'highlight: ' attr(class);
display: block;
text-align: right;
font-size: smaller;
padding-top: 5px;
}
USAGE
<pre><code class="h1"><h1>Heading 1</h1></code></pre>
This will show some text that's after the element. See the following demo for examples:
PLUNKER
This appears to do the job with no CSS and no JS. You just nest the contents in a xmp tag.
<xmp>
...
</xmp>
fiddle
Is there anything in CSS that can achieve this result?
No, there isn't. There is no analog to attr() for element names (and even attr() requires you to specify the attribute name, so you're not looking for a direct analog either).
I need to make a cite attribute visible, ie. showing the url of a blockquote on my webpage. I was told to use only CSS, no html.
Here is what I am currently working with in the html:
<blockquote cite="https://en.wikipedia.org/wiki/History_of_television">
<p>text from wiki</p>
I thought the CSS would be something like: cite href {display: inline-block;}, but that's not working.
I think this is what you're after:
blockquote:before {
content: attr(cite);
}
Here's an example with some additional styling: http://jsfiddle.net/fx4nw3q0/1/
You can show with CSS ::after pseudo-element selector.
blockquote::after{
content:attr(cite)
}
and you can get url with css attr function,
DEMO JSBin
blockquote:after {
content: attr(cite);
display: block;
}
You can use attr(<name>) to pull in attribute values into pseudo blocks by the attribute name.
JSFiddle Example
I made some cool css on my site so I can see what is code and what is not.
Now I want that everytime there is a code block - the text "Code: " will be above the code block.
So I did this:
.code::before {
content: "Code: ";
}
Now the problem is that the text "Code: " is inside the code block, what can I do?
Thank you
Your code is working correctly; pseudo elements do not create line breaks. Here's a workaround:
.code {
position:relative;
margin-top: 1em;
}
.code::before {
position: absolute;
top: -1em;
left: 0;
content:"Code: ";
}
Demo: http://jsfiddle.net/vro5ojb9/
.code::before means a pseudo element inside .code as the first element before any other child elements.
It doesn't mean an element before .code in the document.
CSS Selectors:
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after' pseudo-elements can be used to insert
generated content before or after an element's content.
Your code is doing exactly what it is defined to do, it's not a bug.
Ref: http://www.w3.org/TR/CSS2/generate.html
Here's a simple jQuery that actually inserts a <p> tag before the instances, no need to offset positioning:
$(function() {
$($('<p>').html('Code: ')).insertBefore('.code');
});
JSFiddle: http://jsfiddle.net/p32ufmza/
I have phrase as Client Testimonial and i want to change only the Client i have used only first-letter but is there any method in css to change color .. no javascript please.
How about using :before?
I would change the text from "Client Testimonial" to "Testimonial", and then with CSS apply the :before rule:
HTML:
<div class="word">Testimonial</div>
CSS:
.word {
color: black;
}
.word:before {
color: red;
content: "Client ";
}
Example: http://jsfiddle.net/LvZt7/
As noted by others, there is (unfortunately*) no :first-word pseudo-selector available in CSS (even version 3 or 4, so far as I currently know). However, there are two possibilities that exist without JavaScript, though both have their failings.
The first, and easiest, is to simply wrap the first word in a span:
<p><span>Client</span> Testimonial</p>
And style the span with the highlight:
p span {
color: #f90;
}
JS Fiddle demo.
While this approach does require adding an extra, in this case, span element for styling purposes it is simple to implement, and works reliably cross-browser.
The second is slightly more fragile, though avoids adding the extraneous span tag, but requires, instead, that you add an attribute:
<p data-highlightword="Client">Client Testimonial</p>
With the following CSS:
p[data-highlightword] {
position: relative;
}
p[data-highlightword]::before {
content: attr(data-highlightword);
color: #f90;
position: absolute;
top: 0;
left: 0;
}
JS Fiddle demo.
This approach relies on the addition of a single attribute to a single element, but does require extra CSS and will only work in compliant browsers. Which is almost all of them, now, with only IE 8, or perhaps 9, and below proving problematic.
<p><span style="color: #c0ff33;">Client</span> Testimonial</p>
so yes, just style it with <span></span> its perfect for that kind of situations.
Edit:
This edit is not directed for the post author but for someone just learning to use css: based on "best practises" one should consider using separate .css file for setting styles in a manner like:
.client {
color: #c0ff33;
}
and using it like:
<p><span class="client">Client</span> Testimonial</p>
If you want to specify more and be certain that you only use your span style inside <p></p> you could also introduce it like:
p span.client {
color: #c0ff33;
}
Fiddle: http://jsfiddle.net/LvZt7/97/
You could also do it other way around specifying your p class and not span:
<p class="client"><span>Client</span> Testimonial</p>
and
p.client span {
color: #c0ff33;
}
or just specifying all p span html markings to have text inside span with color #c0ff33:
<p><span>Client</span> Testimonial</p>
and
p span {
color: #c0ff33;
}
You could wrap the word in a span and style it instead. As Henrik Ammer stated in a comment, there is no :first-word.
i'd recommend doing something like this:
<span class = "redcolor">Client </span> Testimonial
CSS:
.redcolor
{
color: red
}
That way if you want anything in red, just give it a div/span with that class