I am trying to create a tooltip with css to span elements but when I do a mouseover it adds extra padding to original text. Is there a way to fix that?
Here's the code
http://codepen.io/anon/pen/BmJqj
Thank you
You need to use
position: absolute; on span:before and span:after
and
position: relative; on span.
Like this:
span {
color: #333;
text-decoration: none;
position: relative;
}
span:hover:after{
content: attr(data);
dislpay: block;
padding: .4em;
color: #fff;
background-color: #333;
border-radius: .4em;
position: absolute;
top: 1.75em;
left: 0;
white-space: nowrap;
}
span:hover:before {
display:block;
content:"";
position: absolute;
border-right: .5em solid transparent;
border-bottom: .5em solid #333;
border-left: .5em solid transparent;
top: 1.25em;
left: .5em;
}
Give it position absolute. The way you have it now, the content gets inserted as normal content:after. So it is in the normal flow and shifts the rest. When you put position:absolute to it, you take it out of the flow and can position it as liked.
Related
I want to recreate the button and the border around the League of Legends Play For Free button.
The problem for me is recreating that border with the cut corners. I do not need the animations.
After inspecting their page elements, I could not find any elements responsible for them, and they do not seem to be using CSS to achieve this. I tried turning off a lot of the CSS, and they seem to persist on the page. Could someone please enlighten me on how they are making these borders, or how I can achieve this with pure CSS?
Do you mean a button like the one in this example?
https://codepen.io/awesammcoder/pen/RYVwxa
body {
background: #333;
}
.button {
font-size: 12pt;
color: white;
background: transparent;
display: inline-block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid white;
margin: 20px;
position: relative;
letter-spacing: 1px;
outline: none;
}
.button:before {
content: '';
width: 20px;
height: 20px;
background: #333;
border: 3px solid white;
transform: rotate(45deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: -12px;
left: -13px;
}
.button:after {
content: '';
width: 20px;
height: 20px;
background: #333;
border: 3px solid white;
transform: rotate(-132deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: auto;
right: -13px;
bottom: -12px;
}
<button class="button">Play now</button>
I'm using a pseudo element in a button to achieve an angled border. But in some browsers and some zoom levels, if you look closely you'll see a faint outline around the pseudo element towards the right of the button on the left edge of the pseudo element.
Here is the fiddle: https://jsfiddle.net/jw1kfmsh/
.button {
position: relative;
padding: 0 20px;
height: 53px;
background-color: red;
border: 4px solid black;
border-right-width: 0;
color: white;
font-weight: 900;
font-size: 14px;
transition: all .425s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
z-index: 1;
filter: blur(0);
}
.button::after {
position: absolute;
content: '';
right: -19px;
top: -4px;
height: 53px;
width: 38px;
background-color: red;
border: 4px solid black;
z-index: -1;
border-left: 0;
transform: skew(-31deg);
transition: all .425s ease;
backface-visibility: hidden;
}
Button Text
I would consider a different idea where you will not have the issue. Make the shape as only one element and rely on overflow to hide the non needed part.
.button {
position: relative;
display:inline-block;
padding: 0 40px 0 20px;
line-height: 53px;
border-left: 4px solid black;
color: white;
font-weight: 900;
font-size: 14px;
text-decoration: none;
overflow:hidden;
z-index: 0;
}
.button::after {
position: absolute;
content: '';
right:0;
top: 0;
left:-5px;
bottom:0;
background: red;
border: 4px solid black;
z-index: -1;
transform: skew(-31deg);
transform-origin:top;
}
Button Text
I'm wondering if there is a css only solution to display a link button like the one below. Any advises?
You can simply use pseudo elements and some border property then adjust the different values to get what you want:
.link {
padding: 10px;
display: inline-block;
width: 80px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
position: relative;
overflow: hidden;
}
.link:before,.link:after {
content: "";
position: absolute;
height: 30px;
width: 30px;
border: 1px solid #000;
left: -19px;
top: 3px;
background: #fff;
transform: rotate(45deg);
transform-origin: center;
}
.link:after {
right: -19px;
left:auto;
}
link
I want to add a white gap between menu elements but Im encountering a weird problem. See this jfiddle: http://jsfiddle.net/ERYat/1/
Here is the CSS code:
/* a styling */
ul#menu-menu-services a {
display: block;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
border-bottom: 2px solid #fff;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
/* li fix */
ul#menu-menu-services li {
margin: 0;
padding: 0;
border: none;
}
/* Sub Menu */
ul#menu-menu-services li ul.sub-menu {
display: block;
margin-left: 0px;
}
ul#menu-menu-services li ul.sub-menu li a {
padding-left: 15px;
font-size: 14px;
}
I can't figure out why is the border diagonal on the left. Anyone knows?
Borders come together like this:
||
||______
|/______
You should use margin-bottom instead of border-bottom fiddle:
ul#menu-menu-services a {
display: block;
font-family: 'Droid Sans', arial, serif;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
margin-bottom: 2px;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
And if you need a white line, consider using :after:
ul#menu-menu-services a { position: relative; }
ul#menu-menu-services a:after {
content: '';
width: 100%;
position: absolute;
height: 2px;
background: #fff;
left: 0;
bottom: -2px;
}
It's because it's drawing the corner of the two borders. Try changing your bottom border to something other than white and you'll see more clearly what it's doing.
To get rid of this effect, you need to get rid of the bottom border.
If you need the gap that the bottom border is currently giving you, you could use padding-bottom or margin-bottom instead.
how we can create a diagonal heading line with pure CSS like mentioned below image :-
By using the :after pseudoelement and transparent borders, it's easy. If you add the :before part, you even get anti-aliasing (of course it is your task to calculate the 50% color):
http://jsbin.com/ejomav/3/edit#javascript,html,live
<div>New Music</div>
<div>Old Music</div>
div {
float: left;
margin-right: 2.5em;
line-height: 2em;
width: 110px;
position: relative;
font-family: sans-serif;
font-weight: bold;
color: white;
background: black;
}
div:after {
content: ' ';
display: block;
position: absolute;
width: 0px;
height: 0px;
top: 0;
right: -2em;
border: 1em solid transparent;
border-bottom: 1em solid black;
border-left: 1em solid black;
}
div:before {
content: ' ';
display: block;
position: absolute;
width: 0px;
height: 0px;
top: 0px;
margin-right: -1px;
right: -2em;
border: 1em solid transparent;
border-bottom: 1em solid #8080FF;
border-left: 1em solid #8080FF;
}
it seems the most appropriate example (the image you provided before you updated your question is the same):
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/
HTML
Rohit AZAD
CSS
a {
padding:10px;
text-decoration:none;
color:white;
height:0;
line-height:50px;
display:inline-block;
font-weight:bold;
border-right:30px solid transparent;
border-bottom:30px solid blue;
}
demo :- http://jsbin.com/uhibub/edit#html,live