I have a label "Show more", that display hidden content. I want all child element of this label to be underline including the arrow. The problem is that only the text has text-decoration and not the arrow. How can I solve this issue in order that also arrow will be in the same underline text.
Thanks
#arrow_create {
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2px;
}
.icos-angle-up {
margin-left: 3px !important;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.icos-angle-down {
margin: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.icos-angle-up {
visibility: hidden;
}
#read_more_checkbox:checked+label[for="read_more_checkbox"]>.icos-angle-up {
visibility: visible;
}
#read_more_checkbox:checked+label[for="read_more_checkbox"]>.icos-angle-down {
display: none;
}
.read_more_txt {
display: none;
}
#read_more_checkbox {
display: none;
}
#read_more_checkbox:checked~.read_more_txt {
display: block;
margin-top: 10px;
}
.read_more_label {
margin-left: 5px !important;
font-weight: bold;
text-transform: uppercase;
}
#read_more_checkbox~.read_more_label:before {
content: attr(read_more);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
cursor: pointer;
width: 110px;
}
#read_more_checkbox:checked~.read_more_label::before {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
content: attr(read_less);
cursor: pointer;
}
<label for="read_more_checkbox" class="read_more_label" read_more="Show more" read_less="Show less">
<span id="arrow_create" class="icos-angle-down"></span>
<span id="arrow_create" class="icos-angle-up"></span>
</label>
So instead of using text-decoration (which only applies to text) you can either use border-bottom or to keep it more complicated there is also the possibility of using a css pseudo class.
Using border bottom
.read_more_label {
border-bottom: 1px solid black;
}
#arrow_create {
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2px;
}
.icos-angle-down {
margin: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<label class="read_more_label">
Show more
<span id="arrow_create" class="icos-angle-down"></span>
</label>
Using css pseudo classes
The benefit of using pseudo classes would be that you also have the chance to design it more and you can even add some litte animations (as I did in the example)
.read_more_label {
position: relative;
}
.read_more_label::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: black;
opacity: 0;
transition: all 0.2s;
}
.read_more_label:hover::after {
opacity: 1;
}
#arrow_create {
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2px;
}
.icos-angle-down {
margin: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<p>HOVER IT: </p>
<label class="read_more_label">
Show more
<span id="arrow_create" class="icos-angle-down"></span>
</label>
If shape arrow doesn't matter.
span {
text-decoration: underline;
}
<html>
<body>
<span>SHOW MORE ∨</span>
</body>
</html>
You can use also other HTML Special Characters
Another way
span {
border-bottom: 1px solid black;
}
span::after {
content: "";
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2px;
margin: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<html>
<body>
<span>SHOW MORE</span>
</body>
</html>
You can use hr tag to draw a line under any thing and then you can add css on hr according to your need.for example if you want to change color of that line you can simply add css on hr tag and change color.
Related
I have a CSS border animation on an HTML link. The animation sets on mouse hover and it automatically adjusts to the with of the link. Once the mouse is hover, border animations appear in pairs, left-right + top-down. When the animation is over the borders will form a square around the link.
It works fine until the link gets a line break and instead of one line I have a link with two lines. In that case the animation will form around the top line in the link and ignore the line break.
I have been trying and trying and I cannot figure out a way to make the animation go around the whole link instead of only around the first meaning. Can anyone help me out?
Code Pen: https://codepen.io/jo-o-figueiredo/pen/KKZOjWM
Thanks in advance!
div.caixa {
margin: 4em auto;
padding: 4em;
box-sizing: border-box;
text-align: center;
}
.sparkle {
max-width: 10em;
color: #5a4d1a;
margin: auto auto;
font-size: 25px;
line-height: 40px;
text-decoration: underline;
text-decoration-color: #b1d6b1;
text-underline-offset: 0.5em;
text-decoration-thickness: 3px;
font-weight: 500;
}
.sparkle:hover {
cursor: pointer;
text-decoration: none;
color: #1a1a1a;
}
.u-hover--sparkle {
box-sizing: border-box;
position: relative;
padding: 0.75em;
}
.u-hover--sparkle::before,
.u-hover--sparkle::after {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
transition: transform .20s;
}
.u-hover--sparkle::before {
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
transform: scale3d(0, 1, 1);
}
.u-hover--sparkle::after {
border-left: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
transform: scale3d(1, 0, 1);
}
.u-hover--sparkle:hover::before,
.u-hover--sparkle:hover::after {
transform: scale3d(1, 1, 1);
transition: transform .35s;
}
<div class="wpb_text_column wpb_content_element caixa">
<div class="wpb_wrapper">
<p>
<a class="sparkle u-hover--sparkle" href="#paket" rel="noopener">Sällskap -
Sammankomster</a>
</p>
</div>
</div>
Set the .sparkle to display block so it covers the whole thing.
Also define how your text should break, because if it's a long word, it has no choice to go out of bound by default.
.sparkle {
display: block;
word-break: break-all;
/* rest of your code */
}
div.caixa {
margin: 4em auto;
padding: 4em;
box-sizing: border-box;
text-align: center;
}
.sparkle {
max-width: 10em;
color: #5a4d1a;
margin: auto auto;
font-size: 25px;
line-height: 40px;
text-decoration: underline;
text-decoration-color: #b1d6b1;
text-underline-offset: 0.5em;
text-decoration-thickness: 3px;
font-weight: 500;
display: block;
word-break: break-word;
}
.sparkle:hover {
cursor: pointer;
text-decoration: none;
color: #1a1a1a;
}
.u-hover--sparkle {
box-sizing: border-box;
position: relative;
padding: 0.75em;
}
.u-hover--sparkle::before,
.u-hover--sparkle::after {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
transition: transform .20s;
}
.u-hover--sparkle::before {
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
transform: scale3d(0, 1, 1);
}
.u-hover--sparkle::after {
border-left: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
transform: scale3d(1, 0, 1);
}
.u-hover--sparkle:hover::before,
.u-hover--sparkle:hover::after {
transform: scale3d(1, 1, 1);
transition: transform .35s;
}
<div class="wpb_text_column wpb_content_element caixa">
<a class="sparkle u-hover--sparkle" href="#paket" rel="noopener">Sällskap -
Sammankomster</a>
</div>
I think there are multiple things to point out:
Easy Fix: Add display: block; to the .sparkle class and increase max-width to enable the text to stand in one line.
Alternatively you could also apply the animation styles to the divs surrounding the Link
Optional: I think you could also remove the <p> element surrounding the link as it is unnecessarily making your markup more complex.
I think I'm close but I am struggling to get a tooltip working exactly as I want. I have a dynamically built HTML table and I want to have tooltips for the contents of the TDs. It needs to be purely css (not based on javascript or events) for performance. I would like the tooltip to appear above and in the center of the TD upon hover and with an arrow underneath. I've got this to work but my problem is the content of the tooltip can sometimes be several lines which increases the tooltip height. When this happens the tooltip is still in the center of the TD but not above it anymore, it has moved down. How can I have a tooltip that will always be above the TD by the same amount regardless of the height. Please help.
html example td:
<td>
<div class="tooltip">
<span>My Tooltip Text</span>
Text in the TD
</div>
</td>
my css:
.tooltip span
{
display: none;
color: #000;
text-decoration: none;
}
.tooltip:hover span
{
display: block;
position: absolute;
background-color: #292929;
margin: -2.8em -1em;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
white-space: pre-line;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: left;
}
.tooltip:hover span::after
{
top: 100%;
left: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid #292929;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-width: 10px;
margin-left: -40px;
}
for example
#keyframes pulse {
0% {
opacity: .5;
transform: translate(-50%, -100%) scale(.5);
}
50%{
opacity: 1;
transform: translate(-50%, -100%) scale(1.2);
}
100% {
transform: translate(-50%, -100%) scale(1);
}
}
.tooltip span
{
color: #000;
text-decoration: none;
transform: translate(-50%, -100%) scale(.5);
position: absolute;
background-color: #292929;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 1rem;
font-weight: 400;
text-align: center;
box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
width: max-content;
max-width: 200px;
top:0;
left:50%;
margin-top: -18px;
visibility: hidden;
opacity: 0;
}
.tooltip:hover{
position: relative;
}
.tooltip:hover span
{
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%) scale(1);
animation: pulse 1s;
}
.tooltip:hover span::after
{
top: 100%;
left: 50%;
transform: translateX(-50%);
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid #292929;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-width: 10px;
}
<br>
<br>
<br>
<br>
<table border="1">
<tr>
<td>Hello</td>
<td>
<div class="tooltip">
<span>My Tooltip Text</span>
Cool text
</div>
</td>
<td>
<div class="tooltip">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
Long text
</div>
</td>
</tr>
</table>
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 6 years ago.
Hi all, I want to create a <button> like the one you can see in the above image, with background: transparent; border: 1px solid #999. I have checked a previous similar question with the same problem, but since it's 3 years old I would to check if there are better solutions.
Do you have an idea on how to achieve this result? Thanks in advance for your replies!
You could do something like this with :before and :after pseudo elements
body {
background: white;
}
button {
padding: 20px 45px;
border: 1px solid #999999;
display: inline-block;
position: relative;
background: white;
color: #999999;
}
button:before, button:after {
height: 25px;
width: 25px;
background: white;
position: absolute;
content: '';
}
button:before {
top: 0;
left: 0;
border-right: 1px solid #999999;
transform: rotate(49deg) translate(-71%);
}
button:after {
bottom: 0;
right: 0;
border-left: 1px solid #999999;
transform: rotate(49deg) translate(71%);
}
<button>CLICK ME</button>
Or you can use SVG
button {
display: inline-block;
background: transparent;
border: none;
}
polygon {
stroke: #999999;
fill: transparent;
stroke-width: 1px;
transition: all 0.3s ease-in;
}
text {
fill: #999999;
font-size: 20px;
transition: all 0.3s ease-in;
}
button:hover polygon {
fill: black;
}
button:hover text {
fill: white;
}
<button>
<svg width="200px" height="100px">
<polygon points="165.083,84.769 15.971,84.769 15.971,28.227 33.742,11.263 185.114,11.263 185.114,66.837 "/>
<text x="100" text-anchor="middle" y="55">CLICK ME</text>
</svg>
</button>
Here's a JS fiddle with a little trick I use with :before and :after.
See this fiddle
button { background: #fff; padding: 8px 10px; border: 1px solid #333; box-shadow: none; position: relative; }
button:before {content: ""; width: 10px; height: 15px; position: absolute; border-right: 1px solid #333; left: -5px; top: -6px; transform: rotate(45deg); background: #fff}
button:after {content: ""; width: 10px; height: 15px; position: absolute; border-left: 1px solid #333; right: -5px; bottom: -6px; transform: rotate(45deg); background: #fff}
You can replace background of :before and :after with yours to fit it correctly.
you should not use transparent background you should use url property like this
.selector{
background: url(imageAddress);
}
Rather than Is it possible to always show up/down arrows for input "number"?, I want to be able to make up/down arrow much bigger and cleaner.
What I have right now:
I need to make them bigger like this:
you can wrap a input in and element and style it
div {
display: inline-block;
position: Relative;
border: 2px solid grey;
border-radius: 10px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div:before,
div:after {
background: white;
right: 0px;
width: 30px;
height: 20%;
position: absolute;
pointer-events: none;
}
div:before {
content: '';
bottom: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
background-position: center;
}
div:after {
content: '';
top: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
transform: rotate(180deg);
background-position: center;
}
input {
height: 80PX;
font-size: 50px;
outline: 0;
border: 0;
}
<div>
<input type="number" value="10" />
</div>
well, to achieve that you have to play with pseudo elements and some CSS3 tricks.
to create triangle https://css-tricks.com/snippets/css/css-triangle/
to manipulate input number spinners
input[type=number]::-webkit-inner-spin-button {
/* your code*/
}
here is the example.
input {
color: #777;
width: 2em;
font-size: 2em;
border-radius: 10px;
border: 2px solid #ccc;
padding: 5px;
padding-left: 10px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor: pointer;
display: block;
width: 10px;
text-align: center;
position: relative;
background: transparent;
}
input[type=number]::-webkit-inner-spin-button::before,
input[type=number]::-webkit-inner-spin-button::after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid #777;
}
input[type=number]::-webkit-inner-spin-button::before {
top: 7px;
}
input[type=number]::-webkit-inner-spin-button::after {
bottom: 7px;
transform: rotate(180deg);
}
<input type="number" value="1">
Another solution, offering uniformity between browsers and more customisation options, would be to use the JQuery UI spinner element.
Is there a way to get a loading icon to show when a button/link is clicked, with just CSS/HTML?
I'm using FontAwesome so I figured I could use their classes to spin a loading icon, but I can't find a way to get it to spin after a specific action (mouseclick).
Basically this is all the code:
<i class="fa fa-circle-o-notch fa-spin"></i> Spin
The only way I could manage now was hiding it in background color.. but that doesn't seem very professional:
body {
background: none repeat scroll 0 0 #dcdcdc;
color: white;
}
.fa {
color: #dcdcdc;
}
a:active .fa {
color: red;
}
Any suggestions?
If an element that looks like a button is acceptable, you can do this with CSS as long as you don't need to support IE8. It works by using a label "for" a checkbox or radio as your button. Then, the :checked CSS pseudo class does the trick!
This example sets the background color of a div, but you can set whatever properties you need.
label {
display: inline-block;
background-color: #28529c;
color: white;
padding: 4px 8px;
}
#loading {
background-color: transparent;
width: 20px;
height: 20px;
}
#hidden-flag {
display: none;
}
#hidden-flag:checked ~ #loading {
background-color: green;
display: inline-block;
padding-left: 10px;
}
<input id="hidden-flag" type="radio">
<label for="hidden-flag">Button</label>
<div id="loading"></div>
Needs a bit of work, But as I'm off to beddy byes now I'm not carrying on with it, Up early tomorrow. Pure css sort of unfinished example. When the new page is loaded just bring in a new set of buttons to click.
#to_click:visited {
content:"";
display: block;
float: left;
position: relative;
margin: 40px 30px;
border-radius: 100px;
width: 20px;
height: 20px;
border: 5px solid #57E;
border-top-color: transparent;
border-bottom-color: transparent;
animation-name: rotateclock;
animation-duration: .75s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#to_click:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 100px;
width: 10px;
height: 10px;
border: 5px solid #57E;
border-left-color: transparent;
border-right-color: transparent;
}
#to_click:after {
content: "";
display: block;
position: absolute;
top: 5px;
left: 5px;
border-radius: 100px;
width: 0px;
height: 0px;
border: 5px solid #57E;
border-top-color: transparent;
border-bottom-color: transparent;
}
#keyframes rotateclock {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Click Me