I can't figure out how to change the icon on the li in this url.
I tried to change the content but that just gave an extra figure over the green v.
https://codepen.io/gnevin/pen/axNVex
.check-list {
margin: 0;
padding-left: 1.2rem;
}
.check-list li {
position: relative;
list-style-type: none;
padding-left: 2.5rem;
margin-bottom: 0.5rem;
}
.check-list li:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: -2px;
width: 5px;
height: 11px;
border-width: 0 2px 2px 0;
border-style: solid;
border-color: #00a8a8;
transform-origin: bottom left;
transform: rotate(45deg);
}
Here use border and transform used for rotation. If you want to change there are a few more ways. First of all, remove the border and put what you want in the content.And use List style for default styling
k.imgur.com/gwikL.png
Related
I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text
I'm requesting your help with a .css hr class
I'm trying to figure out how to make a double border like this:
Here's what i did:
hr.style15 {
border-top: 4px double black;
}
hr.style15:after {
content: 'SHIPPING INFO';
display: inline-block;
position: relative;
top: -15px;
left: 40px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}
My questions are:
1) How do I get rid of the inline-block below the 2 lines? I've tried by deleting the inline-block sentence but it doesn't work.
2) Can I add font-family and font size to this?
3) Is it possible to increase the space between the 2 lines without increasing the width?
Basically I believe I'd do it differently. Using both :after and :before for the lines will help you drastically on putting a text on top of it.
So I prepared this CodePen for you. Basically what I did was using an :after and a :before (as I told you before) for the border-lines and after that I added a span with a background-color (in this case white) on top of the border-lines (look at the z-index).
.container {
width: 800px;
position: relative;
}
.double-bar {
&:after {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
}
&:before {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
}
span {
z-index: 2;
position: relative;
background-color: white;
left: 40px;
padding: 0 7.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
}
}
You can see a demo of this.
I hope this helps!
Please have a check with this:-
HTML
<h1 class="title"><span>Shipping info</span></h1>
CSS
h1.title {
margin-top: 0;
position: relative;
}
h1.title:before {
content: "";
display: block;
border-top: solid 1px black;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 1;
border-bottom: 1px solid #000;
}
h1.title span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
margin-left: 50px;
}
I have a CSS tooltip set-up to appear to the right of a link when hovered over, and it is working correctly when the link all appears on one line.
However, if the linked text runs too long and goes onto the next line, the tooltip won't appear to the right of the last word any longer.
This content section of this post is an example of what I'm talking about: http://blog.betbright.com/top-stories/premier-league-tactical-analysis-and-betting-tips-four-things-we-learnt-25th-august/
Some of the links are one on line (working correctly) some are on two lines (not working).
Here is my code for this tooltip:
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
Any help with this would be appreciated.
Thanks,
Paul
Here is how i would do it,
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
/* left: 100%; */
/* top: 50%; */
margin-top: -4px;
margin-left: 15px;
z-index: 999;
}
I wouldn't use top and left property, they position elements absolutely.
In the case where you have two lines top:50% positions the tooltip between the two lines.
I commented out top/left and adjusted the margin-top.
http://www.w3schools.com/cssref/pr_pos_top.asp
Best
y_s_f
You need to remove height.
a.CTA span{
position: absolute;
width: 110px; /*then make adjustment here */
color: #FFFFFF;
background: #00A1E0;
display: block;
/* height: 30px; */
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
Then the long text will be fit inside the tooltip.
I think you can use float: right; for your tooltip, then display: inline-block;
I need help turning the arrow white with a blue border like the box containing the text. I need to use the title inside an a tag as the content but feel free to edit everything else I managed to get it to a certain point but cant seem to get past this:
CSS
.toop {
position: relative;
padding: 0 5px;
line-height: 23px;
}
.toop:hover:after {
content: attr(title);
color: #474747;
font-size: 14px;
line-height: 150%;
text-align: left;
background-color: #ffffff;
border-radius: 5px;
border: 2px solid #2192ce;
padding: 5px 10px;
opacity: 0.9;
display: block;
width: 180px;
position: absolute;
left: 10px;
bottom: 40px;
z-index: 98;
}
.toop:hover:before {
content: "";
border: solid;
border-color: #2191ce transparent;
border-width: 10px 10px 0 10px;
opacity: 0.9;
display: block;
left: 30px;
bottom: 30px;
position: absolute;
z-index: 99;
}
HTML
<br>
<br>
<br>
<br>
<br>
Tooltip is here
you can not do that , you can not have a border around the "arrow" . making that arrow is a trick you can do with css to manipulate the :after and :before to make it appear like an arrow , but you can not have a border outside of that unless you wanted to use an image and put it in that place.
see an example I made of your code to show
outline: 2px solid #000;
outline can be used to make a border outside of the actual border, but it is not going to be anything like what you wanted.
http://jsfiddle.net/pp9t0vqb/4/
The best you can do is fake the arrow with an entire block:
.toop:hover:before {
content: "";
width:10px;
height:10px;
background:white;
border: 2px solid #2192ce;
border-width:0 2px 2px 0;
transform:rotate(45deg);
display: block;
left: 30px;
bottom:35px;
position: absolute;
z-index: 99;
}
But in this case you can't handle the opacity property.
Check this Demo Fiddle
I have the following icon , which is used mainly on most of my asp.net mvc web pages:-
<i class=" icon icon-blue icon-star-on "></i>
The related CSS classes for this icon is :-
.active .icon32.icon-star-on,.icon32.icon-star-on,.icon32.icon-star-on:hover {background-position : -448px -96px ;}
.icon.icon-blue,.icons-blue .icon {background-image : url('../img/opa-icons-blue16.png') ;}
But I need to add a tootip for the icon, so that when a use move the mouse over the icon to show a tooltip. So is there a way to define the tooltip inside my CSS , so that I do not have to add the tooltip manually on each screen?
Thanks
Yes, by using :after:
.icon:hover:after {
content: "Your tooltip";
display: block;
position: relative;
top: -16px;
right: -16px;
width: 100px;
background: lightblue;
}
Also check the demo.
Please note that all .icon classes get the same tooltip. This is pure CSS solution. If you want them to be different for each icon, you could use different classes, or use jQuery.
Add an attribute with the text for the element and use it for hovering.
I have showed using an anchor tag.
html
Hover here
css
.tooltip{
display:inline;
position:relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
'http://jsfiddle.net/Kxnqx/'
Add this code to your css:
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
text-decoration: none;
}
.tooltip:hover:after{
background: #111;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 18px;
color: #fff;
content: attr(title);
display: block;
left: 50%;
padding: 5px 15px;
position: absolute;
white-space: nowrap;
z-index: 98;
}
.tooltip:hover:before{
border: solid;
border-color: #111 transparent;
border-width: 6px 6px 0 6px;
bottom: 12px;
content: "";
display: block;
left: 75%;
position: absolute;
z-index: 99;
}
Add a a title to your icon title="Tooltip text" and add the class of tooltip to the icon.
Source: http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY