I am trying to make a green check mark in CSS in the following way:
I am using the following CSS in order to get that:
div.default.tabs ul.child:first-child li.child.active::after
{
display: block;
position: absolute;
right: 20px;
top: 10.5px;
content: "✔";
font-size:xx-large;
width: 20px;
height: 20px;
line-height: 22px;
text-align: center;
color:#9CD106;
font-weight: normal;
}
At this moment, I am getting some list of alphabets(as shown in below image) in place of a green check mark although in the content section, I have put ✔. Just want to know why this is happening and how we can get the same check mark as shown in the top image.
Another possibility: don't use a character at all. Since you want a checkmark that's very squared off, create it out of the borders of a pseudo-element, rotated as needed.
ul {width:200px; list-style:none; margin:0; padding:0;}
li {position:relative; background:#658B00; margin:0; padding:3px; color:white; border-radius:4px;}
li::after {
content: "";
position: absolute;
right:4px;
top:6px;
width:14px;
height:5px;
border-left:4px solid #9CD106;
border-bottom:4px solid #9CD106;
transform:rotate(-45deg);
}
<ul>
<li>testing</li>
</ul>
Related
This question already has answers here:
Title with bottom border smaller than width
(7 answers)
Closed 8 years ago.
I came across interesting underline effect that looks like this:
It's simple, but I can't think of a way to achieve it without using additional html elements in markup, that will be not semantic. I am wondering if it is possible to achieve it using css and without having any additional elements. Effect is essentially an underline / bottom border that is smaller than element and centered under it.
Here is my markup for navigation, where this effect will be used on current page links.
<nav id="navigation" class="right">
<ul>
<li> Home </li>
<li> About </li>
<li> Work </li>
<li> Blog </li>
<li> Contact </li>
</ul>
</nav>
try this one - http://jsbin.com/lumasive/1/
#navigation li a { position:relative; }
#navigation li a:after {
content: '';
position:absolute;
bottom:0;
left: 30%;
right: 30%;
height: 2px;
background:red;
display:block;
}
same as others , the use of a pseudo , but in the flow: DEMO
li ,a {
display:inline-block;
color:#EE7972;
font-size:40px;
font-variant:small-caps;
text-decoration:none;
}
a {
margin:1em;
}
a:after {
content:'';
display:block;
height:0.2em;
width:35%;
margin:auto;
border-bottom:solid ;
}
a:hover {
color:turquoise;/* change color of text and mini-border*/
}
Without additional HTML:
jsFiddle
You can use the "after" css property:
a:after {
display: block;
position: absolute;
content:"__";
width: 100%; top: 10px;
text-align: center;
left: 0;
}
You can use an :after pseudo-element to append extra markup your a elements:
Like all the other answers, but perhaps a little less CSS required.
a:after {
display: block;
content: "";
width: 60%;
margin: 0 auto;
border-bottom: solid 1px steelblue;
}
http://codepen.io/anon/pen/qebHo
use "after" property to achieve this. : jsFiddle
CSS:
.right ul li a{
position:relative;
text-decoration:none;
}
.right ul li a:after{
content: '';
position:absolute;
bottom:0;
left: 30%;
right: 30%;
background:black;
height:1px;
}
You can as well use linear backgrounds: DEMO or DEMO 2
CSS demo 1
a {
margin:1em;
padding-bottom:0.2em;
background:linear-gradient(
to left,
transparent 33%,
#EE7972 33%,
#EE7972 66%,
transparent 66%
)
bottom no-repeat;
background-size: 100% 3px;
}
CSS demo 2
a {
margin:1em;
padding-bottom:0.2em;
background:linear-gradient(
to left,
#EE7972 ,
#EE7972
)
bottom no-repeat;
background-size: 1em 3px;
}
Possible animation with this border: border animated
I'm trying to create a clickable image that has text running across the bottom with a background behind the text set to half opacity. Quite common in a lot of websites. I have this working other than a bottom lip running the length of the image poking out below the text background. It seems to be coming from the li containing the image and anchor. I've searched online and tried several ways to remove it but without any success.
How can I get the background color for my text to fit neatly to the bottom of my image ?
<ul id='main-aside-buddhaImgs'>
<li>
<div class='titleCont'>
<a href='#'><img src='images/squarebuddha.jpg' alt='budda' height='120' width='120'/>
<span>title</span>
</a>
</div>
</li>
ul#main-aside-buddhaImgs {
float:left;
}
ul#main-aside-buddhaImgs li {
float:left;
padding:12px 15px;
}
ul#main-aside-buddhaImgs li div.titleCont {
position:relative;
}
ul#main-aside-buddhaImgs li a {
display:block;
}
ul#main-aside-buddhaImgs li a span{
display:block;
position: absolute;
bottom: 0;
left:0;
width:100%;
color:#fc6;
text-align: center;
line-height: 30px;
background: #300;
background: rgba(51,0,0,.5);
}
Change your bottom attribute for ul#main-aside-buddhaImgs li a span to 4px
ul#main-aside-buddhaImgs li a span{
display:block;
position: absolute;
bottom: 4px;
left:0;
width:100%;
color:#fc6;
text-align: center;
line-height: 30px;
background: #300;
background: rgba(51,0,0,.5);
}
http://jsfiddle.net/Kr5QP/
I want to do this with CSS only. I have an unordered list and some hyperlinked list items and I want to limit the width and height of the links (list items) to width:300px and height:1.5em. So, no matter what the length of the links are, only up to 300px of the links will be showing and the rest will be hidden because of height limit and overflow:hidden. I want to show the rest of the link on mouse hover.
I can partially do this and hover over links shows the rest of the content BUT it also pushes down the content below it.
Is it possible, to show the rest of the content on mouseover WITHOUT pushing down the content below it?
Please see this fiddle 'http://jsfiddle.net/3VyaC/'
Looks a little clunky, but it's close to the effect you're shooting for. Only changed your CSS:
body {font-family: arial; font-size: 0.8em;}
.news-entry ul {
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
width: 300px;
}
.news-entry li {
border-top: 1px solid #dcdcdc;
width:300px;
height:1.5em;
overflow:hidden;
position:relative;
}
.news-entry li a.itemtitle {
display: block;
width: 100%;
padding: 4px 0 3px 0;
line-height: 1.5em;
text-decoration: none;
}
.news-entry li:hover {
color: #333;
background-color: #fafafa;
overflow:visible;
z-index:10;
}
.news-entry li:hover a{
position:absolute;
width:100%;
background-color:#fafafa;
border:1px solid #555;
}
Fiddle: http://jsfiddle.net/y3Vkt/
Might need to tweak the margins when the link changes to absolute position, there's a 1-2px glitch.
Hope this helps!
There would not be a way to do this. The only way you could actually do that is by setting position: absolute; but that would make the link sit on top of the next one. So to basically answer your question, there is not a way to do this with the width set as you have it.
I have ONLY one <UL> and under that we have group of <LI>
<ul>
<li>1<li>
<li>2<li>
<li>3</li>
<li>4<li>
</ul>
now I wanted to show them as TABLE, please help me with CSS, how can we show as a TABLE for above UL/LI in below table format, 2 LI set in one TR (two TD) and so on....
Well, here's one possible solution:
ul {
width: 450px; /* change it to whatever you like */
position: relative;
/* these should be probably already set up by `reset.css` */
list-style-type: none;
margin: 0;
padding: 0;
}
ul:before, ul:after {
text-align: center;
display: block;
border: 1px solid black;
border-bottom: 0;
width: 48%;
}
ul:before {
content: 'col1';
border-right: 0;
}
ul:after {
content: 'col2';
position: absolute;
top: 0;
left: 48%;
margin-left: 1px;
}
li {
text-align: right;
width: 48%;
float: left;
border: 1px solid black;
margin-bottom: -1px;
}
li:nth-child(even) {
margin-left: -1px;
}
It works (JSFiddle; tested in Chrome, Firefox and Opera; nth-child(even) selector obviously fails in IE8, so you have to emulate it with class or other means; but otherwise it's still solid), but I admit I feel guilty about this. )
P.S. If you want to add padding to the "cell" contents, don't forget to change their widths as well, like here:
li {
width: 47%;
padding-right: 1%;
}
It's a really late answer, but I think this is a common topic. Here's a codepen I made.
Obviously it's just a starting point. It also has some example of how to add styles like bg or borders. If the 'cells' contain some arbitrary content, you'll have to adjust dimensions, for example. I use this kind of code for thumbnails galleries, for example, where you don't have to worry about borders or bgs and it's quite elementary code (the example is for a 2x3 table, see codepen):
ul{
list-style:none;
}
ul li{
float:left;
padding:10px;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
ul li:nth-child(3n){
background-color:#888;
}
ul li:nth-child(3n+1){
clear:both;
border-left:1px solid #000;
background-color:#ccc;
}
ul li:nth-child(-n+3){
border-top:1px solid #000;
}
Hope it helps.
You cannot convert a single list (containing more than 2 items) into 2 columns via the display: table properties because you need some element to act as the table-row. Without an element acting as a table-row, all adjacent elements that are set to display: table-cell will be contained within an anonymous table-row element that cannot be modified or styled in any way.
Your only option is to either change the markup (to use tables or lists of lists) or use a different approach to your CSS: either floats/inline-block on the lis or using the columns property on the ul.
I am trying to do a custom bullet list. However, I want to use the same background-image, but changing the background-position (to give a cool effect)
The CSS I have is:
#sidebar ul{
width:190px;
list-style:none;
margin:0;
padding:0;
}
#sidebar li{
border-top:1px dashed #ddd;
background:#FAFAFA url('./images/bullet.png') no-repeat 15px 9px;
}
#sidebar li:hover{
background-color:#fff;
background-position:15px 0px;
}
#sidebar li a{
display:block;
padding:5px 20px 5px 26px; /*26 to give extra 6px for the bullet*/
}
The bullet changes correctly, and everything is ok. Except that both bullets are always visible :(
I want to know if there is a way to hide the other bullet.
An option could be to spread the images very far away (more than the height will ever be), but this is just a bad idea, and I don't want to have a big image size.
I am open for other methods, if the way I am trying to do is just not good and you know a better way, please tell me.
I think it would be better to do something like this. Adjust values to your needs.
<li><span></span></li>
.
li { position: relative; }
li span {
position: absolute;
left: 0;
width: 16px;
height: 16px;
margin-right: 16px;
background: url('img.jpg') 0 0 no-repeat;
}
li:hover span { background-position: 0 -16px; }