on my website, I got a couple of images linking to various services. Today, I wanted to add the service-name under the image. The name is already in the title-attribute of the anchor-tag, so I thought this should be easy. I tried it like this:
a[title]:after{
content:"\A" attr(title);
font-size:10px;
text-decoration: underline;
}
The problem with that: The linebreak is ignored, the text is displayed inline. Is there any solution?
You can either use display: block to force the line-break, but this seems to require that the parent a is also display: block
a {
display: block;
}
a[title]:after{
display: block;
content: attr(title);
font-size:10px;
text-decoration: underline;
}
...or, you can use position: absolute;, though this means adding CSS to your a style definitions as well:
a: {
position: relative;
/* ...everything else...*/
}
a[title]:after{
position: absolute;
top: 1em; /* assuming your 'a' font-size is 1em, with no line-height/padding, adjust to taste */
left: 0; /* assuming you want it aligned with the left-hand side of the parent 'a' */
content: attr(title);
font-size:10px;
text-decoration: underline;
}
Demo added to JS Bin
Related
How do a create menus with pure css that are evenly spaced and the li elements take the entire ul space?
I followed this solution to create the menus that are evenly spaced out: https://stackoverflow.com/a/17951253/757955
I want the li elements to take up all the area of the ul element. I have a separator image I want to put between the menu items. Also I want people to be able to click anywhere in the menu item and be taken to that page.
Here is the js fiddle: https://jsfiddle.net/prusikknot/btp6Lkos/
Notice how the red and green boxes don't touch. I want the red and green boxes to touch between each other at the midway point between the menus.
There will be a variable number of menus and the menu names will vary in length. I'm targeting IE8+ and the latest version of the other major browsers but the old IE part may get dropped.
Here is the html:
<nav id="idMainNav">
<ul>
<li>ASDF</li>
<li>QWER</li>
<li>ZXCVB</li>
<li>UIOP</li>
<li>HJKL</li>
<li>VBNM</li>
<li>TYUI</li>
</ul>
</nav>
Here is the css:
#idMainNav{
width: 900px;
}
#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}
#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}
#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}
#idMainNav li:first-child {
padding-left: 10px;
}
#idMainNav li:last-child {
padding-right: 10px;
}
li {
background: green;
}
li:nth-child(odd) {
background: red;
}
#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}
The thing about display:inline-block; is that it behaves like text and creates white space between elements. To counteract this, make the inline-block parent element have a font-size:0; (in this case the ul) and then reset the li to a font-size value not relative to the parent (since it's now 0).
Also, you don't really need to set justify to anything here, you just need to explicitly state the width of all the lis. In my test, setting the li to width:13.95%; worked nicely but it depends on the number of lis.
Hi I have a list item containing text like this:
<li>Search</li>
and I want to display an icon using font awesome
li:before {
content: "\f002";
}
I don't have the ability to just remove the "Search" text (it is being generated from a Drupal CMS, as is the markup and class names), but I want to hide the Search text, but show the pseudo element (the search icon). How do I do this? Normally what I would do to hide the text is just go:
li {
text-indent: -1000px;
overflow: hidden;
}
but that will hide the pseudo element as well
A bit late to the party, but you could always change the font-size of the li to 0, and change the font-size of the icon back to the original font-size. Like this:
li {
font-size: 0;
}
li:after {
font-size: 1em;
}
You can stick to the "text-indent" method (or better the "Kellum Method") and use CSS positioning for the pseudo element:
li {
display:block;
position:relative;
text-indent: -100%;
white-space: nowrap;
overflow: hidden;
}
li:after {
content: "visible pseudo-element";
position:absolute;
right:0;
}
http://jsfiddle.net/Fiddel/aopteq8m/
This is pretty hacky, and don't tell anyone I did this, but jsfiddle.net/57BGV.
li {
list-style: none;
text-indent: -65px;
}
li:after {
content: "Test";
display: inline-block;
padding-left: 80px;
}
One way to do it would be to change the font-color to whatever the background-color is. This won't remove the text from the flow but will hide it, which is what you're asking, technically.
Assuming your background is white:
li {
color: #FFF;
}
I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.
Edit: it seems to be working fine on Firefox 37.
The answer below is still relevant, but the style related issues from mid 2013 are resolved.
IE support isn't mentioned here but edits/answers regarding it are welcome.
demo
The HTML:
<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>
The CSS:
input[type=checkbox] {
appearance: none;
background: transparent;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
left: 0;
content: '';
text-align: center;
background: #aaa;
display: block;
pointer-events: none;
opacity: 1;
color: black;
border: 3px solid black;
}
input[type=checkbox] + label {
line-height: 48px;
margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
content: '';
background: #32cd32;
opacity: .3;
}
input[type=checkbox]:checked::after {
content: '\2713';
background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
width: 48px;
height: 48px;
font-size: 46px;
line-height: 48px;
vertical-align: middle;
border-radius: 50%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.
What do I need to change to have it look the same on Firefox as it does on Chrome?
Desired:
Not desired:
You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.
-moz-appearance:initial
I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from
input[type=checkbox]::after
to
input[type=checkbox] + label::after
Downside:
requires a label
But:
HTML requires input elements to have a label
Conclusion:
only bad for invalid HTML
doesnt technically need a LABEL, but does need control over the mark up to ensure there is a target-able sibling immediately after the checkbox.
i.e.
input[type=checkbox] + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
input[type=checkbox]:checked + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
<input type="checkbox"></input>
<span class="targetMe"></span>
target the span using the sibling selector and :after elements as above.
Might as well put in a label tho at this point... :P
The problem is that :after and ::after technically create an element as the last child of the element the pseudoselector is applied to. Firefox doesn't like to create children inside of its checkboxes. This is actually part of a bigger topic which is replaced elements.
You will see the same issue with the :before and ::before pseudoelements not working on checkboxes because they would create elements as a first child element within the element being selected.
I made a new website and my problem is that the menu is ok in FF and other browsers, but not in IE.
The problem is, it wont list the list elements, no hover , no color, and not inline.
here is the code
nav {
margin-top: 15px;
}
nav ul {
position: relative;
left: 297px;
}
nav li {
float: left;
padding: 0 20px;
font-size: 12px;
line-height: 65px;
background: url(images/line.png) no-repeat right 10px;
height: 72px;
text-transform: uppercase;
}
nav li a {
color: #656464;
text-decoration: none;
display: block;
}
nav li:hover {
background: url(images/hover.png) repeat-x 0 35px;
color: #242424;
}
could please someone could give me a hint?
nav is an HTML5 element; old IEs will not recognize it and thus won't apply your styles.
To make IE recognize HTML5 markup, place the HTML5 shiv on your page, then declare a rule for nav and any other HTML5 elements you use, giving them a display: block style, just above the CSS that you have now.
<nav> is fine to use on a page, but you will run into problems with it when you try and style it as many browsers simply skip the tag if they don't understand it.
Wrap the <nav> tag in a wrapper div and style that instead, and strip away any styling from the semantic tags so they are naked.
What are the most useful media="print"-specific, cross-browser-compatible CSS properties?
I think we have these 5 properties for print specific.
page-break-before
page-break-after
page-break-inside
widows
orphans
Please explain when and where to use these? Which are cross browser compatible? and what are other common CSS properties can be useful in print, other than display:none?
I use the famous A list apart article (CSS Design: Going to Print) and this article when I need to make a printable version of a page. There are some common tags, but a lot depends on the css model (as well as container padding and margins) you are using:
body {
background: white;
font-size: 12pt;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
#content a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}
I use the following:
/* Browser will TRY to avoid spanning content within across a page */
tr, td, th {page-break-inside:avoid}
/* Repeat table headers when table spans a page */
thead {display:table-header-group}
/* Apply to anything you don't want to print */
.NoPrint {visibility:hidden; display:none}
Chris Coyier at css-tricks.com wrote a great article on this:
http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
In the spirit of sharing, here's a couple of rules I regularly use. They fit in well with SemanticUI, but may be helpful elsewhere
[class*="printed only"] {
display: none;
}
#media print {
.printed {
display: initial !important;
opacity: 1 !important;
}
[class*="non printed"] {
display: none !important;
opacity: 0 !important;
}
}
Display on screen and print
Use class="printed". This is handy when you have tabs in your UI, so you can force them to be printed even if they aren't currently being displayed
Display on screen but don't print
Use class="non printed". This is handy for navigation elements and other stuff you don't want to print
Don't display on screen but print
Use class="printed only". I find it handy to include some metadata about a webpage on the printed version that might be irrelevant to the web version - eg the date/time the page was generated, the username of the person that printed the document, a link (if removed from headers) and soforth.