This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 2 years ago.
[data-title] {
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
position: absolute;
top: -30px;
left: 0;
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background-color: cadetblue;
color: #fff;
font-size: 12px;
font-family: sans-serif;
white-space: nowrap;
}
[data-title]:hover::after {
content: '';
position: absolute;
top: -7px;
left: 8px;
display: inline-block;
border: 8px solid transparent;
border-top: 8px solid cadetblue;
}
It works with most elements Example:
<p data-title="This is the tooltips">Test Tooltips</p>
But it doesn't work with < input > element:
<input type="text" data-title="Test input tooltips" />
try like this
[data-title] {
position: relative;
cursor: help;
margin-top:50px;
}
[data-title]:hover::before {
content: attr(data-title);
position: absolute;
top: -30px;
left: 0;
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background-color: cadetblue;
color: #fff;
font-size: 12px;
font-family: sans-serif;
white-space: nowrap;
}
[data-title]:hover::after {
content: '';
position: absolute;
top: -7px;
left: 8px;
display: inline-block;
border: 8px solid transparent;
border-top: 8px solid cadetblue;
}
<div data-title="Test input tooltips">
<input type="text" />
</div>
Related
I am having trouble getting the triangle left to display as I desire. I would like to make the following snippet to be a triangle left instead of a square tilted 135 degrees. Help is greatly appreciated!
Codepen snippet
/*
Like Count Box
*/
.like-count {
line-height: 1;
white-space: nowrap;
text-align: center;
padding: 3px 7px;
font-size: 12px;
vertical-align: middle;
display: inline-block;
margin-left: 10px;
width: 60px;
background-color: inherit;
border: 1px solid #fff;
padding: 4px;
position: relative;
}
.like-count:after {
content: '';
display: inline-block;
position: absolute;
top: 5px;
left:-7px;
width: 10px;
height: 10px;
background: #fff;
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
}
Instead of rotate the pseudo, you can use its borders to make a triangle.
/*
Like Count Box
*/
.like-count {
white-space: nowrap;
text-align: center;
padding: 3px 7px;
font-size: 12px;
vertical-align: middle;
display: inline-block;
margin-left: 10px;
width: 60px;
background-color: inherit;
border: 1px solid #000;
padding: 4px;
position: relative;
}
.like-count:after {
content: '';
position: absolute;
top: -1px;
left: -11px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid black;
}
<br><br>
<div align="center">
<div class="like-count">33</div>
</div>
I am developing a chat application. In that chat message box I need to show a message, the user's name, current date and time. I am showing all those things except time and date UI is not looking good.
.userTextDivOp {
text-align: left;
float: left;
clear: both;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 4px;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
text-align: left;
padding-bottom: 4px;
margin-top: 3px;
}
.userTextDivOp .time {
position: absolute;
font-size: 14px;
color: #f60;
text-align: right;
}
<div class="userTextDivOp">
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
.userTextDivOp {
text-align: left;
float: left;
clear: both;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 40px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 4px;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
text-align:left;
padding-bottom: 4px;
margin-top: 3px;
}
.userTextDivOp .time {
position: absolute;
font-size: 14px;
color: #f60;
}
<div class="userTextDivOp" >
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
You can use the time class to define the span you want to change.
.userTextDivOp {
text-align: left;
float: left;
clear: both;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 4px;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
text-align:left;
padding-bottom: 4px;
margin-top: 3px;
}
.userTextDivOp .time {
//#You can edit these style settings to edit how the Time and date look
position: relative;
font-size: 14px;
color: pink;
padding: 0 20px;
font-family: courier, monospace;
}
<div class="userTextDivOp" >
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
Well, One thing You can do, like facebook ; You can make the time visible when someone hovers the chat message.
JS FIDDLE
HTML:
<div class="wrapper">
<div class="userTextDivOp" >
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
</div>
.wrapper{
position: relative;
}
.userTextDivOp {
text-align: left;
float: left;
clear: both;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-top: -3px;
margin-left: -2px;
cursor:pointer;
}
.userTextDivOp .time {
position: absolute;
font-size: 14px;
color: #f60;
left: 125px;
top: 0;
visibility:hidden;
}
.userTextDivOp:hover .time {
visibility:visible;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
text-align:left;
padding-bottom: 4px;
margin-top: 3px;
}
Isnpite of using You can use the tag with datetime attribute , Time is just an HTML tag. Here's a simple example that represents November 2011:
<time> 2011-11 </time>
And The datetime attribute is what makes the time element unique. It represents the date, time, or duration for whatever text you are representing in a machine readable format. That means it is for computers, not humans, so it has very specific formats.
It's probably a bit more common for the human-readable version to be just a textual representation of the datetime:
<time datetime="2011-11">November, 2011</time>
<time datetime="2013-04-01">April 1st, 2013</time>
<time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41 seconds</time>
I have been trying to add an arrow to the div with class .b, but is not working and I cannot figure out why. Does anyone has any idea?
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
}
#nextgoal.b :after {
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;"><div class="a">AA</div><div class="b">Next Goal</div></div>
your selector is not correct and content:''; is missing to effectively generate your pseudo element, try this:
#nextgoal .b:after {
content: '';
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
overflow: visible;
}
#nextgoal .b:after {
content: '';
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;">
<div class="a">AA</div>
<div class="b">Next Goal</div>
</div>
it is obviously not an arrow but a dot that shows because border is here ...
.
Here is my link http://jsfiddle.net/ashadee/xhaLqvav/.
Html code
Eat your lunch<br>
CSS
a{
font-size: 1.2em;
white-space: normal;
}
a.rectangle
{
width: 70%;
height: 5%;
border: 1px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
}
how will I make the design like the one in the image? Should I use canvas property.
demo - http://jsfiddle.net/victor_007/xhaLqvav/2/
use pseudo element :after and :before for styling right box and rounded
a {
font-size: 1.2em;
white-space: normal;
}
a.rectangle {
width: 70%;
height: 5%;
border: 2px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-size: 32px;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
position: relative;
}
a:before {
content: '';
border-right: 2px solid black;
height: 100%;
position: absolute;
background: orange;
width: 50px;
top: 0;
bottom: 0;
left: 0;
}
a:after {
content: '';
width: 30px;
height: 30px;
border-radius: 50%;
background: black;
position: absolute;
left: 35px;
top: 50%;
transform: translatey(-50%)
}
Stanford
<br>
I was wondering whether it is possible to extend pseudo elements with another pseudo element. I tried the following, but it didn't work.
li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 12px 6px 0 6px;
&:before {
content: "";
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 12px;
}
&:after{
#extend &:before;
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
}
One way you could do it would be to create a placeholder. Like so..
%pseudo-block {
content: "";
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 12px;
}
li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 12px 6px 0 6px;
&:before {
#extend %pseudo-block;
}
&:after{
#extend %pseudo-block;
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
}