making a vertical line before text when hovered - html

I have created a list and when I hover a line should be displayed like this
See when hovered over Mobile & Tablets a vertical line is shown with orange color at the beginning
This is my simple code
ul {
list-style: none;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
background-color: grey;
}
li:hover {
background-color: white;
}
<ul>
<li>List</li>
<li>List</li>
</ul>


This should give your the result as shown in the example:
ul {
list-style: none;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
background-color: white;
border-top: solid 1px transparent;
border-bottom: solid 1px transparent;
border-left: solid 6px transparent;
}
li:hover {
background-color: white;
border-top-color: grey;
border-bottom-color: grey;
border-left-color: orange;
}
<ul>
<li>List</li>
<li>List</li>
</ul>


You have different possibilities to solve this. You can try the following solutions:
solution using box-shadow:
ul {
list-style:none;
padding:0;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left:5px;
background-color: grey;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
}
li:hover {
background-color: white;
box-shadow:inset 3px 0px 0px 0px red;
border-top-color:grey;
border-bottom-color:grey;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
solution using border-left:
ul {
list-style:none;
padding:0;
}
li {
border-left:3px solid transparent;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left:5px;
background-color: grey;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
}
li:hover {
border-left-color:red;
background-color: white;
border-top-color:grey;
border-bottom-color:grey;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
solution using linear-gradient:
ul {
list-style:none;
padding:0;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left:5px;
background-color: grey;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
}
li:hover {
background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
background-color: white;
border-top-color:grey;
border-bottom-color:grey;
}
<ul>
<li>List</li>
<li>List</li>
</ul>


All you need to do is add a thick orange border to the left side of the li element on hover:
ul {
list-style:none;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
background-color: grey;
}
li:hover {
background-color: white;
border-left: 5px solid orange;
}
<ul>
<li>List</li>
<li>List</li>
</ul>


you can give padding and a border for the same
li:hover
{
background-color: white;
border-left: 5px solid orange;
padding-left: 5px;
}


What you have to do is just add below CSS to your li:hover field,
li:hover{
border: 1px solid #cbcbcb;
border-left: 3px solid orange;
background-color: white;
color: orange;
}


Include a border from the beginning and then change it to the color you need.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 5px 0 5px 5px;
margin-bottom: 5px;
border: 1px solid transparent;
border-left-width: 5px;
}
li:hover {
cursor: pointer;
background-color: white;
border-color: lightgray;
border-left-color: orange;
}
<ul>
<li>List</li>
<li>List</li>
</ul>


You could use a css ::before pseudo-element. See code snippet.
ul {
list-style: none;
}
li {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
background-color: grey;
}
li:hover::before {
content: '';
width: 2px;
height: 100%;
position: absolute;
background-color: orange;
top: 0;
}
li:hover {
background-color: white;
}
<ul>
<li>List</li>
<li>List</li>
</ul>

Related

How do I add a border under each navigation link without making the bottom border more bold

I can't seem to make the bottom border under LinkedIn link less bold as it is double bordered.
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100px;
border: 1px solid;
border-bottom: 1px solid;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: red;
color: white;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>LinkedIn</li>
</ul>

change css
li:last-child a {
border-bottom: none;
}

When you do that :
li a {
border-bottom: 1px solid;
}
you tell CSS to add a border bottom to all link inside a li.
li:last-child {
border-bottom: none;
}
was almost correct, but you didn't tell css the same rule as the previous snippet.
the good way to put this is
li:last-child a {
border-bottom: none;
}
Another thing you can remove
border-bottom: 1px solid;
inside the ul block it does not do anything

Here are my solution with extra class:
.liBorder {
border-bottom: solid black 1px;
}
<ul>
<li class="liBorder">Home</li>
<li class="liBorder">About</li>
<li class="liBorder">Services</li>
<li class="liBorder">Contact</li>
<li class="liBorder">LinkedIn</li>
</ul>
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100px;
border: 1px solid;
border-bottom: 1px solid;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: red;
color: white;
}
.liBorder {
border-bottom: solid black 1px;
}
https://jsfiddle.net/master1991/cjzfdg3v/3/

you can use this css
li:last-child a {
border-bottom: none;
}
li:last-child {
border-bottom: none;
}

how to draw inverted round corners on selected list item?

Lets assume a set of boxes one below the other separated by some border.
If I set one of the boxes, it should have top-left-border-radius and bottom-left-border-radius
Also for the above box, bottom right border radius should be there without disturbing the flow of border and also the box below the selected one should have top right border radius without disturbing the flow of the border.
Image provided.

try this https://plnkr.co/edit/dN4LqEQGIG6hmegl7DRV?p=preview
.box:nth-child(even){
border: 1px solid #000;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-right:none;
border-top:none;
border-bottom:none;
}
.box:nth-child(odd){
border: 1px solid #000;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-left:none;
margin-left:4px;
}

This should solve your problem:
div {
width: 100px;
height: 40px;
}
.first {
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.second {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-bottom-right-radius: 10px;
width: 92px;
margin-left: 8px;
}
.third {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
width: 92px;
}
.fourth {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-top-right-radius: 10px;
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>

Here is a pure css way to achieve this.
Following HTML structure will be needed for this:
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
.....
.....
.....
<li>
<span>n</span>
</li>
</ul>
In this trick we will use :before and :after pseudo elements to draw round borders.
Output Image:
Note: This method will work if height of list items is fixed and same.
body {
background: linear-gradient(lightgreen, green);
margin: 0;
min-height: 100vh;
}
ul {
overflow: hidden;
list-style: none;
width: 30%;
margin: 20px 1%;
float: left;
padding: 0;
}
ul li {
position: relative;
}
ul li:before,
ul .active:after {
border: solid black;
border-width: 0 2px 2px 0;
position: absolute;
height: 100%;
bottom: 100%;
content: '';
width: 100%;
right: 0;
}
ul .active:before {
border-radius: 0 0 5px 0;
width: calc(100% - 10px);
}
ul .active:after {
border-radius: 0 5px 0 0;
border-width: 2px 2px 0 0;
width: calc(100% - 10px);
margin-top: -2px;
bottom: auto;
top: 100%;
}
ul li:last-child.active:after {
border-radius: 0;
}
ul .active + li:before {
display: none;
}
ul .active + li + li:before {
height: calc(100% - 10px);
}
ul li span {
padding: 5px 10px;
position: relative;
display: block;
z-index: 5;
}
ul li:first-child span {
border-top: 2px solid black;
}
ul li:first-child.active span {
border-top-left-radius: 5px;
}
ul li:last-child span {
border: solid black;
border-width: 0 2px 2px 0;
}
ul li:last-child.active span {
border-width: 0;
}
ul .active + li:last-child span {
border-right-width: 0;
}
ul .active span:before {
border: solid black;
border-width: 2px 0 2px 2px;
border-radius: 5px 0 0 5px;
position: absolute;
content: '';
width: 10px;
top: -2px;
bottom: 0;
left: 0;
}
<ul>
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
</ul>
<ul>
<li><span>1</span></li>
<li class="active"><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
</ul>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li class="active"><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
</ul>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li class="active"><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
</ul>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li class="active"><span>5</span></li>
<li><span>6</span></li>
</ul>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li class="active"><span>6</span></li>
</ul>

from a list and a single pseudo, there is something to do too :
(tabindex is added for the demo, you can click or tab through item to see borders and backgrounds switching),
item's height and padding do not matter much but you need to mind the radius value and borders thickness , if necessary, to update margin and or coordonates to match the value used
ul {
background: linear-gradient(to left, white, #0F4782, #069ED5, white);
border-bottom: solid;
padding: 0;
margin: 0 1em;
}
li {
display: block;
border: solid;
border-left: none;
border-bottom: none;
padding: 0.5em;
}
li:focus,
li:active {
outline: none;
border: solid;
border-right: none;
position: relative;
left: -.5em;
margin-top: 3px;
margin-bottom: -3px;
border-radius: 0.5em 0 0 0.5em;
background: linear-gradient(to right, tomato, white)
}
li:focus + li,
li:active + li {
border-radius: 0 0.75em;
}
li:focus:before,
li:active:before {
content: '';
border-radius: 0.75em;
border: solid transparent;
border-bottom: solid;
position: absolute;
right: -8px;
bottom: 100%;
height: 0.75em;
width: 0.75em;
transform: rotate(-45deg);
;
}
li:focus i, li:active i {display:none;}
li:focus:after,
li:active:after {
content: '> focused';
font-weight:bold;
}
<ul>
<li tabindex="0">item <i>click me</i></li>
<li tabindex="0">item<br/> <i>click me</i></li>
<li tabindex="0">item <i>click me</i></li>
<li tabindex="0">item <i>click me</i></li>
<li tabindex="0">item <i>click me</i></li>
<li tabindex="0">item <i>click me</i></li>
</ul>

.box{
width:300px;
height:30px;
border:2px solid #000;
display:block;
overflow:hidden;
margin-left:10px;
}
#one,#two,#four{
border-left:none;
}
#two{
border-bottom-right-radius:20px;
}
#one,#three{
border-bottom:none;
}
#three{
border-top:none;
border-right:none;
border-bottom-left-radius:20px;
border-top-left-radius:20px;
margin-left:0px;
width:40px;
}
#four{
border-top-right-radius:20px;
}
<div id="one" class="box"></div>
<div id="two" class="box"></div>
<div id="three" class="box"></div>
<div id="four" class="box"></div>

ul {
list-style: none;
}
li {
padding:20px;
}
li:nth-child(1) {
border-right: 1px solid #000;
border-top: 1px solid;
border-bottom: 1px solid;
}
li:nth-child(2) {
border-right: 1px solid #000;
border-bottom: 1px solid;
border-bottom-right-radius: 15px;
margin-left: 13px;
}
li:nth-child(3) {
border-left: 1px solid;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom: 1px solid;
margin-right: 13px;
}
li:nth-child(4) {
border-right: 1px solid #000;
border-top-right-radius: 15px;
border-bottom: 1px solid;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Dear please check with this snippet , i just give you the perfect shape. This is exactly what you need check with the edges
.box1 {
width:300px;
height:100px;
border:1px solid #000;
border-left:0;
border-right-width:2px;
}
.box2 {
width:300px;
height:100px;
border-right:2px solid #000;
border-bottom-right-radius:20px;
border-bottom-left-radius:0px;
position:relative;
}
.box2::after {
position:absolute;
right:-2px;
width:30px;
height:30px;
border-bottom:2px solid #000;
border-right:2px solid #000;
border-bottom-right-radius:20px;
border-bottom-left-radius:0px;
bottom:0px;
content:"";
}
.box2::before {
position:absolute;
right:16px;
width:90%;
height:2px;
background:#000;
bottom:0px;
content:"";
}
.box3 {
width:281px;
height:100px;
border-bottom:2px solid #000;
border-left:2px solid #000;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
position:relative;
}
.box3::after {
position:absolute;
left:-2px;
width:30px;
height:30px;
border-top:2px solid #000;
border-left:2px solid #000;
border-top-left-radius:20px;
border-bottom-left-radius:0px;
top:-2px;
content:"";
}
.box4 {
width:300px;
height:100px;
border-bottom:1px solid #000;
border-right:2px solid #000;
border-top-left-radius:20px;
border-top-right-radius:20px;
position:relative;
}
.box4::after {
position:absolute;
right:-2px;
width:30px;
height:30px;
border-top:2px solid #000;
border-right:2px solid #000;
border-top-right-radius:20px;
border-bottom-left-radius:0px;
top:-2px;
content:"";
}
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

Border pixels are overlapping

I cannot figure this out.
I want the colored border to overlap the grey border. However, the border refuses to overlap the bottom border.
Here's a picture:
http://gyazo.com/bc4cbaab9bfa3a173709309ad64f880e.png
The code for the borders is:
<li>
<div class="content blue-border">
<span class="icon-uniE601"></span>
</div>
</li>
.sidebar ul li {
background-color: #f2f2ea;
border-right: 1px solid #dfdfd7;
border-top: 1px solid #dfdfd7;
}
.content
{
border-left: solid 5px #0094ff;
width:100%;
height:100%;
}
.content span
{
height: 70px;
text-align: center;
line-height: 70px;
font-size: 2em;
color: #787878;
}
.sidebar ul li:hover
{
background-color: black;
}
.sidebar ul li:first-child
{
border-top: none;
}
ul li
{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.blue-border
{
border-left: solid 5px #0094ff;
}
.orange-border
{
border-left: solid 5px #ff6a00;
}
And here's the code:
http://jsfiddle.net/bG8Wb/2/
Thanks in advance!

You can try this
element_that_needs_to_shift {
position:relative;
top:1px;
}
...
Is this what you wanted?
.sidebar ul li {
background-color: #f2f2ea;
border-right: 1px solid #dfdfd7;
/*border-top: 1px solid #dfdfd7;*/
}

Bringing an up-arrow on the top of the second level menu?

I have created a simple .arrow-up class of CSS:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I want this arrow to come on exact top of the second level menu, here is my menu code:
HTML:
<header>
<div class="welcome_area">
<p>
Welcome, <b>Arkam Gadet </b>
</p>
</div>
<div class="menu">
<nav>
<ul>
<li>My Profile
<ul>
<li>My Questions
</li>
<li>Settings
</li>
</ul>
</li>
<li>Inbox
</li>
<li>Notifications
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #eee;
height: 45px;
box-shadow: 0px 2px 3px 1px #bbb;
}
a {
color: black;
text-decoration: none;
}
h2 {
color: #f79a1d;
}
.welcome_area {
float: left;
margin-left: 5%;
}
.menu {
float: right;
margin-right: 5%;
}
.menu nav > ul {
position: relative;
padding:0px;
}
.menu nav ul li {
display: inline;
padding: 5px;
}
.menu nav ul li a {
padding: 2px;
}
.menu nav ul li a:hover {
background: #eee;
border: 0;
border-radius: 3px;
box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
position: absolute;
left: -30px;
top: 40px;
padding:0px;
width: 150px;
border-radius: 3px;
display: none;
background-color: #eee;
box-shadow: 0px 0px 2px 3px #bbb;
}
.menu nav > ul li > ul li {
display: block;
}
Demo.
I tried to add it as a li of the list but then it's coming inside it not on top of it.
How can I bring the .arrow-up on top of the second level menu?

What about something along these lines:
.menu nav ul ul:before {
width:0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
display:block;
clear:both;
position:absolute;
top:-5px;
border-bottom: 5px solid black;
content:'' ;
}

Can't have selected tab font color to black

I am trying to design some tabs using CSS and following this post. Unfortunately, I can't manage to have the selected tab font color to black.
I have created a JsFiddle to describe the issue. What am I doing wrong?
Here is the HTML:
<div id="header">
<h1>Tabs</h1>
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
Here is the CSS:
h1 {
margin: 0;
padding: 0 0 5px 0;
}
#header a {
text-decoration:none;
}
#header ul {
list-style: none;
padding:0;
margin:0;
}
#header li {
float: left;
border: 1px solid;
border-color: black;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 2px 4px;
/* border-bottom-width: 0; */
margin: 2px 2px 0 0;
background: black;
}
#header li a {
color: white;
}
#header #selected {
position: relative;
/* top: 1px; */
background: white;
}
#header #selected li a {
color: black;
}

Updated jsFiddle: http://jsfiddle.net/zK7y2/1/
#header #selected li a {
color: black;
}
this addresses a <* id="header"><* id="selected"><li><a>.
What you want to select is a <* id="header"><li id="selected"><a>.
So use:
#header li#selected a {
color: black;
}