I have a class that I apply to a span to format it a bit different to show an action someone must take.
<p>Example of styling a <span style="background-color:#ccc; color:#066; font-weight:900; padding:0 8px;">Button</span> press.</p>
This example shows an inline style but it will eventually be in a class. What I want to know is is it possible to add angle brackets around the text as part of the styling? I know that <q> can achieve this but I want this to be part of the styling information. Is this possible in anyway.
Many thanks for any help in advance.
Yes you can include brackets in your styles using pseudo-elements, it isn't supported by <= IE7 though (~4.5% market share last time I checked). This method uses pseudo-elements :before and :after to generate content based on CSS before and after the element respectively (while still remaining inside .button).
jsFiddle
.button:before {
content:"<";
}
.button:after {
content:">";
}
You can do this easily with the pseudo :before and :after and content.
span:before {
content: "ยซ";
}
span:after {
content: "ยป";
}
I also think that this would be more appropriate as a kbd element.
http://jsfiddle.net/ExX66/
Related
I've got two values in my Model where either or both can contain a value. If both contain a value, I want to put a dash between them in the View. So, using span tags as containers for the properties, the output HTML will be
<span>First</span><span></span>
<span></span><span>Second</span>
<span>First</span>-<span>Second</span>
I can ViewModel this but I wanted to know if it was possible using just HTML/CSS. I've tried using the before and after CSS commands to insert the dash, but it doesn't do the job.
Any ideas if it's possible and if so, how?
CSS doesn't support inserting generated content before or after an element, so a pure solution to this isn't going to be straightforward.
If your spans need to be inline, or if you can't modify your HTML (e.g. the dash must appear between the two spans), you're better off handing this logic over to either JavaScript or the view model (or I guess both, if you're using a JavaScript MVVM framework).
If not, and you don't mind cheating a little and/or utterly trashing the semantics of your HTML, placing the dash in a third span following the first two allows you to show it using span:not(:empty) + span:not(:empty) + span and hide it otherwise.
Or, depending on how your layout works, you may be able to cheat in other ways. For example, if putting the dash in one of your spans is an option (e.g. because the spans don't have any special formatting), it's as easy as
span:not(:empty) + span:not(:empty)::before { content: '-'; }
Whichever it is, though, I suspect you'll invariably have an easier time just exposing a separate property in your view model.
So here it is a quick tricky way with just html & css complex selectors.
The base here is to include the dash - on the second element if it is not empty.
And if the first element is empty then push the second to offset and hide the dash.
div {
overflow: hidden;
line-height: 2em;
}
div span:first-child:empty {
margin-left: -10px;
}
div span:last-child:not(:empty):before {
content: "-";
width: 10px;
text-align: center;
display: inline-block;
}
<div><span>First</span><span></span></div>
<div><span></span><span>Second</span></div>
<div><span>First</span><span>Second</span></div>
Using the + adjacent selector will be like:
div {
overflow: hidden;
line-height: 2em;
}
div span:first-child:not(:empty) + span:not(:empty):before {
content: "-";
width: 10px;
text-align: center;
display: inline-block;
}
<div><span>First</span><span></span></div>
<div><span></span><span>Second</span></div>
<div><span>First</span><span>Second</span></div>
Yes, it's possible, though I think there are probably better ways to do it, like at the time the data is added.
Here's my solution.
span:nth-child(odd):not(:empty)+span:nth-child(even):not(:empty)::before {
content: '-'
}
<span>First</span><span></span>
<span></span><span>Second</span>
<span>First</span><span>Second</span>
<br><br>
<span>First</span><span></span><br>
<span></span><span>Second</span><br>
<span>First</span><span>Second</span>
What I'm saying is whenever there is an odd position span that is not empty it will update the next even position span if it's not empty with a hyphen.
I hope you find this helpful ๐
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
<!DOCTYPE html>
<html>
<head>
<style>
.hypen-text::after {
content: "-";
}
}
</style>
</head>
<body>
<span>first</span>
<span>second</span>
<span class="hypen-text">first</span><span>second</span>
</body>
</html>
if you have still doubt refer this link https://developer.mozilla.org/en-US/docs/Web/CSS/::after
I used #Boltclock's answer
span:not(:empty) + span:not(:empty)::before { content: '-'; }
which made it surprisingly easy (when you know how) and just added classes to the spans so I can make sure it only happens where I need it to and so I can follow what's happening a bit more easily when I come back to this in a week's time :) The HTML I used is
<span class="spnAddADash">
<span class="spnValueOne">First</span>
<span class="spnValueTwo">Second</span>
</span>
And the corresponding style is
.spnAddADash .spnValueOne:not(:empty) + .spnValueTwo:not(:empty)::before {
content: '- ';
}
which both together render
First
Second
First - Second
I've a logo text in anchor tag and the Text logo to have the first letter of ever word red.
FLETCHER ROBBE INTERNATIONAL LLP
Like below image:
I've used span but it doesn't seem working in my scenario. Can some one point me to some CSS approach? Thanks
Working JSFIDDLE
This is the best you can do for inline elements in pure HTML + CSS:
<a class = "name" href="http://frobbeintl.com" title="">
<span>F</span>letcher
<span>R</span>obbe
<span>I</span>nternational
<span>LLP</span<
</a>
CSS:
.name {
text-transform: uppercase;
}
.name span {
color: red;
}
You could use the ::first-letter selector, as in CSS-Tricks. <- only for block elements
Although you can use this property
a::first-letter {
color: red;
}
But note this would be applied to the very first word in the Hyperlink, not in the word.
Here is a document for this http://css-tricks.com/almanac/selectors/f/first-letter/
You could change your code to the following:
<span>F</span>LETCHER <span>R</span>OBBE <span>I</span>NTERNATIONAL <span>LLP</span>
Having that you can style the spans differently. From a markup standpoint that's fine because span has no meaning.
Using this technique and ids/nth-child you can even go as far as styling every letter differently.
As you see this gets ugly very quickly - so someone created a little jQuery plugin to do it for you: http://letteringjs.com/
Hope that helps.
I am using Icomoon to create custom font icons, i have a situation where to icons need to be in the same span such as:
<span class="glyph2" aria-hidden="false" data-icon="๎ ๎"></span>
But they both need to be different colors. Is it possible at all to do this?
And here's the JSFIDDLE containing all the code, but i cant seem to get the custom fonts working in jsfiddle.
Any Help Greatly appreciated.
I don't believe this is possible using only the data-icon attribute.
You could use IcoMoon's icon- classes instead and use the before CSS pseudo selector on one, and the after selector on the second.
icon1:before {
content: "A";
color:red;
}
.icon2:after {
color: blue;
content: "B";
}
I have demonstrated this in a Fiddle.
I haven't been able to demonstrate that in the fiddle, but it looks like it can work.
IcoMoon's are styling in an :before pseudo selector. Acordingly to css the first-letter pseudo-selector should work on the generated content, and so including the :before data.
So, including
.glyph2:first-letter {background-color: blue; color:white}
You should be able to give this appearance to the first icon (generated in
a :before pseudo element with 2 custom chars).
It worked for me in local, but I couldn't get it to work in the fiddle.
pseudo elements a:after a:before allow you to add text that appears to be part of the link. However, I can't seem to figure out a way to make that portion clickable as part of the link.
For example the following css shows the url afterward:
a:after {
content: " (" attr(href) ")";
}
...but it will not be clickable.
Anyone get around this without changing underlying HTML?
Edit: I am using chrome 13.0.782.107. It turns out it's a bug. (Thanks Sean)
It looks like you have discovered a bug in the browser you are using.
Based on the spec, the generated content should be treated as a child of the element it is being generated for. I created a JSFiddle to test this out, and the generated text is linked for me in most browsers (Chrome 13 being the solitary exception.) My guess is that you are testing in Chrome. This is a reproducible bug.
The workaround is to simply specify a background color on your links ... if you want to be able to use this for all links, declaring a background image (but not specifying an image, or using a transparent .gif - or as just pointed out, setting opacity to anything other than 1) works.
I've had the same problem and apparently if I set
a { vertical-align: middle; }
(thus on the link itself, not the pseudo element), it works.
I'm hoping someone has a better solution than this, but just in case not, I did come up with this horrible/crappy/hacky solution:
a {
margin-right: 40px;
}
a:after {
content: " (" attr(href) ")";
margin-left: -40px;
}
Just add this to your css:
a {padding-right:Ypx} /* Y = size of your url in pixels */
If the size of the URL varies you will have to use javascript to get it.
If you have a link on Wrapper then you can make pseudo-elements clickable by setting pointer-events to none.
a:after {
pointer-events: none;
}
To avoid modifying the document tree, you could use a JavaScript click handler for a:after.
Edit: This doesn't work, because pseudo elements aren't added to the DOM.
The :before and :after add content before and after the selector. In CSS, there's no selector that let's you get and edit the content inside a tag. The only way to make that happen would be with jQuery or javascript to actually edit the HTML.
I wrapped the link and the text separately -- the :before goes on the container and the link goes inside. This way I can use the :before as a jQuery tigger and the text as a link.
HTML:
<li class="before-here">My Link Text</li>
CSS:
li.before-here:before{ //some css like an image }
Jquery:
$("li.before-here").click(function(){ //do something});
I'm using this to create a hide/show toggle in a tree -- this gives me the button I need on the left and allows me to link to the parent.
I have the following html snippet:
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
Here is the css for these classes
.title
{
color:#707070;
}
.username
{
color:#8DAAB8;
}
.dateandtime
{
color:#A5A7AC;
}
Is it possible to change the colors of these 3 items when hovering over the title?
The colors I want the items to change to are as follows
title = 000000
username = DF821B
dateandtime = 3185B6
Not sure if this is possible with css, if the html snippet structure needs to change, that will not be a problem.
I know this can be done with javascript, but wanted to know if it is possible without javascript.
Use the :hover pseudoclass:
.title:hover
{
color: #000000;
}
etc. This works in all browsers, except in IE6 and earlier, which doesn't support :hover on anything other than hyperlinks (A elements).
Edit 1: I see you want to change them all while hovering over the title. In that case, it becomes a little more complicated. You should put a <div> around it and apply the :hover pseudoclass on that. It won't just be the title (which is also possible, but has even less chance of working in IE). For that:
<div class="someclass">Title<span class="username">username</span><span class="dateandtime">date and time</span></div>
is your HTML, but your CSS would be:
.someclass .title:hover { color: #000000; }
.someclass .title:hover ~ .username { color: #DF821B; }
.someclass .title:hover ~ .dateandtime { color: #3185B6; }
Where ~ is the sibling selector (meaning it should have the same parent (.someclass) as the .title:hover).
#Harry Joy: No, it's not. My answer is different, not to mention I don't have enough rep to post comments.
Edit 2:
As requested, to make them all change while hovering over the entire container, use the above HTML with the following CSS:
.someclass:hover .title { color: #000000; }
.someclass:hover .username { color: #DF821B; }
.someclass:hover .dateandtime { color: #3185B6; }
(though basically credit for that goes to Spudley for suggesting it first).
Not totally clear on the question -- do you want each of them to have their own hover colour, or do you want all three to change colour at once, when you hover on any of them?
In the first case, it's easy: just add a :hover style for each of the three elements (you already have answers to this effect, so I won't repeat them here).
In the second case, you'll need a container element that would take the hover, so your code would look like this:
<span class='container'>
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
</span>
(you may want to use <div> rather than <span>, but I'll leave that up to you)
Your CSS would then look like this:
.title {color:#707070;}
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}
.container:hover .title {color:#000000;}
.container:hover .username {color:#DF821B;}
.container:hover .dateandtime {color:#3185B6;}
Obviously, change the colours in the new styles to whatever you want them to be. If all three should be the same, then you could simplify the three new styles down to something like this:
.container:hover span, .container:hover a, {color:#000000;}
Hope that helps.
One final thing to note: IE6 and below do not support the :hover style on anything except <a> elements. My recommendation to you is simply not to support IE6 for your site (there are plenty of other things broken in IE6 too), but if you do need to support it, there are hacks available to get :hover to work with it. See Whatever:Hover.
It's definitely possible, just append this to your CSS:
.title:hover
{
color:#000000;
}
.username:hover
{
color:#DF821B;
}
.dateandtime:hover
{
color:#3185B6;
}
This called a pseudo-class and will make your anchors change color when hovered )
Edit:
At first I misunderstood your question, this isn't the solution!
You can't do this in CSS alone, but you can do it jQuery easily!
Here's an example.
What you need to do is set up a class for each of the hovered states, then use jQuery to replace add a class that will change the colors as you want :)
You just have to include the jQuery framework if you haven't already:
In the <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
Well you could do this one of two ways but not with CSS, you can either add and remove the appropriate classes (unobtrusive JavaScript) or change the styles directly. For instance:
document.getElementById('someElement').style.color = '#FF0000';
Or you can use a JavaScript library such as jQuery.
jQuery('p.someClass').mouseOver(function(e) {
e.target.style.color = '#FF0000';
})
.mouseOut(function(e) {
e.target.style.color = '#000000';
});