I've got a CSS element set up to insert some content, via:
.foo:after {
content: "Bold, italics";
}
I'd like the word "Bold" to be rendered in a bold font-weight and the word "italics" to be rendered in an italics font-style. I know it's possible to add lines:
font-weight: bold;
font-style: italics;
But this will make both words bold and italics. If I could use html elements inside the content field I would put something like:
content: "<strong>Bold</strong>, <em>italics</em>"
But alas that's not possible.
Is there another way to achieve this effect? Ideally without invoking javascript and purely using html/css.
It's mentioned above, but unless you add a :before and :after not too sure how it can be accomplished without JS..
.foo {
float: left;
}
.foo:after {
content: "Bold, ";
font-weight: bold;
float: right;
margin-left: .5em;
display: block;
}
.foo:before {
content: 'Italic';
font-style: italic;
float: right;
margin-left: .5em;
display: block;
}
It also contains floats everywhere, but, hey! it works:)
Check it here: http://codepen.io/achoukah/pen/gpBopd
EDIT:
Heres the same, but with flex-box:
.foo {
width: 100%;
clear: both;
display: flex;
}
.foo:before {
content: "Bold, ";
font-weight: bold;
margin-left: .5em;
order: 1;
}
.foo:after {
content: 'Italic';
font-style: italic;
margin-left: .5em;
order: 2;
}
You do have other pseudo elements than 'after'/'before', like first-line or first-letter, which, with some imagination, maybe you could use on your particularly case:
w3schools Pseudo-elements
But 'inside' those first 2 I think you can not do nothing more, like #s0rfi949 pointed out.
Related
I am trying to position a very basic div inline with some text.
When I move the div it leaves blank spaces that I can't remove. Would you be kind to guide me with some css tricks for it?
.chord {
color: orangered;
font-weight: bold;
display: inline;
position: relative;
top: -20px;
left: 20px;
}
<br/> Empty
<div class="chord">Bm</div>spaces, what are we living for?<br/><br/> Abandoned
<div class="chord">G</div>places, I guess we know the score <br/>
Fiddle, in case you want to play with it.
https://jsfiddle.net/rondolfo/r3dphgsL/11/
I did search for an answer and I couldn't find it, but I believe it is a very basic problem for someone that is proficient in css.
Use inline-flex instead of inline, set the width to 0. That will remove the space, but still show the chord text. You can also remove the left adjust and add a space before the div.
.chord{
color: orangered;
font-weight: bold;
display: inline-flex;
position: relative;
top: -20px;
width: 0px;
}
Setup some classes to use as before elements and position them accordingly. You can even make one for each chord as demonstrated below.
.chord{
position: relative;
}
.chord:before{
color: orangered;
font-weight: bold;
display: block;
position: absolute;
content: "";
top: -20px;
}
.chord.b-minor:before {
content: "Bm";
}
.chord.g:before {
content: "G";
}
<br />
Empty <span class="chord b-minor"></span> spaces, what are we living for?<br/><br/> Abandoned<span class="chord g"></span> places, I guess we know the score <br/>
Using only CSS, I'm trying to set a list of links to have a exclamation mark next to them if they are 'unvisited' links, and a check box next to them if they have been visited. The former works fine, but when the links have been visited, the tick box doesn't appear. My CSS is as follows:
.journey-table td a:link:before {
content: "\f071";
font-family: FontAwesome;
padding-right: 5px;
}
.journey-table td a:visited:before {
content: "\f14a";
font-family: FontAwesome;
padding-right: 5px;
}
Any help would be greatly appreciated.
According to this page, the styling of a :visited element, has been made very limited, for privacy reasons. Because of this, any child elements or pseudo elements of a visited link will be styled like an unvisited link.
I've created an example for you to understand
a:before {
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
float: left;
margin-right: 10px;
}
a:hover:before {
background-color: red;
}
this is a link
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
I am trying to change the css property of first line of a big sentence, I am experimenting with it by using color property, I have an html element
<span class="tripname_heaing">Where Hummus All Began: Jasdasdasddasdasdasdasdadasdasdasdasdsadsadasdasdordan & Issdassasdsadsadsadrael</span>
and CSS property
.span.tripname_heaing:first-line {
color: red
}
span.tripname_heaing{
color: blue
}
span.tripname_heaing {
font-size: 24pt;
font-weight: normal;
line-height: 24pt;
margin: 0;
padding: 0;
}
But the psuedo element property is not working with the above syntax. I am adding a fiddle to show the demo. What could be wrong with this?
http://jsfiddle.net/X33pY/126/
And edit made to fiddle to show the feature
http://jsfiddle.net/X33pY/126/
The ::first-line pseudo element doesn't apply to inline-level elements; from Selectors Level 3:
In CSS, the ::first-line pseudo-element can only have an effect when
attached to a block-like container such as a block box, inline-block,
table-caption, or table-cell.
You can instead use a <p> or change the display value of the <span> - http://jsfiddle.net/X33pY/127/
You had a lot of problems like color: red, it should be color: red;
You also had to add display: block; to the main container since it is a span tag, these are not block elements.
.tripnameHeaing {
font-size: 24pt;
font-weight: normal;
line-height: 24pt;
margin: 0;
padding: 0;
color: blue;
display: block;
}
.tripnameHeaing:first-line {
color: red;
}
jsfiddle with answer
I give up. Why is :first-letter not working here?
strong {
font-weight: bold;
color: blue;
}
strong:first-letter {
color: red;
}
<strong>test test</strong>
Further to other answers, it also (in Chromium at least) works with elements with display: inline-block, so the display simply has to be anything other than inline (including list-item), for example:
strong {
font-weight: bold;
color: blue;
display: inline-block;
}
strong::first-letter {
color: red;
}
JS Fiddle demo.
Also, ::first-letter is a pseudo-element, so the syntax should be double-colon rather than single, in order to distinguish the selector from a pseudo-class.
first-letter does not work with inline elements, only on block elements.
first-letter can only be used with block elements.
This will work, but the question is how useful a block level strong is:
http://jsfiddle.net/UZpLG/
strong {
font-weight: bold;
color: blue;
display: block;
}
strong:first-letter {
color: red;
}
<strong>test test</strong>
Here is JSBin
:first-letter does not work with inline elements
Modify your CSS with this one, add display:block in your strong{...}
strong {
font-weight: bold;
color: blue;
display: block;
}
strong:first-letter {
color: red;
}
You should read about Note: The "first-letter" selector can only be used with block-level elements.
and Block-level elements
and example http://jsfiddle.net/eLvWt/6/
strong {
display:block;
color:green;
}
strong:first-letter {
color: red;
}
NOTICED: Please ignore this my answer's references since it is out-dated.