Hover area - Bottom border - html
I have the following navigation menu: https://jsfiddle.net/LauraStoian/5kmo0v7e/ 4.
body {
border: solid 3px black;
}
#UL_1 {
align-items: stretch;
block-size: 103px;
box-sizing: border-box;
display: flex;
height: 103px;
inline-size: 241.828px;
justify-content: flex-end;
letter-spacing: 0.16px;
margin-block-end: 0px;
margin-block-start: 0px;
margin-inline-start: 141.453px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
padding-inline-start: 0px;
perspective-origin: 120.906px 51.5px;
text-size-adjust: 100%;
transform-origin: 120.914px 51.5px;
width: 241.828px;
flex: 1 1 auto;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
margin: 0px 0px 0px 141.453px;
padding: 0px;
}
/*#UL_1*/
#UL_1:after {
block-size: 0px;
box-sizing: border-box;
clear: both;
content: '"' '"';
display: table;
height: 0px;
inline-size: 0px;
letter-spacing: 0.16px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 0px 0px;
text-size-adjust: 100%;
transform-origin: 0px 0px;
width: 0px;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#UL_1:after*/
#UL_1:before {
block-size: 0px;
box-sizing: border-box;
content: '"' '"';
display: table;
height: 0px;
inline-size: 0px;
letter-spacing: 0.16px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 0px 0px;
text-size-adjust: 100%;
transform-origin: 0px 0px;
width: 0px;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#UL_1:before*/
#LI_2 {
align-items: center;
block-size: 103px;
bottom: 0px;
box-sizing: border-box;
display: flex;
height: 103px;
inline-size: 72.875px;
left: 0px;
letter-spacing: 0.16px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 36.4375px 51.5px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
transform-origin: 36.4375px 51.5px;
width: 72.875px;
flex-flow: column nowrap;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_2*/
#LI_2:after {
box-sizing: border-box;
display: block;
letter-spacing: 0.16px;
text-size-adjust: 100%;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_2:after*/
#LI_2:before {
box-sizing: border-box;
display: block;
letter-spacing: 0.16px;
text-size-adjust: 100%;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_2:before*/
#A_3 {
align-items: center;
block-size: 103px;
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
bottom: 0px;
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: flex;
height: 103px;
inline-size: 72.875px;
left: 0px;
letter-spacing: 0.3px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
padding-block-end: 10px;
padding-block-start: 10px;
padding-inline-end: 15px;
padding-inline-start: 15px;
perspective-origin: 36.4375px 51.5px;
position: relative;
right: 0px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
top: 0px;
transform-origin: 36.4375px 51.5px;
white-space: nowrap;
width: 72.875px;
border: 0px none rgb(0, 0, 0);
flex: 1 1 auto;
flex-flow: row wrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
padding: 10px 15px;
transition: all 0.3s ease 0s;
}
/*#A_3*/
#A_3:after {
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: block;
letter-spacing: 0.3px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
white-space: nowrap;
border: 0px none rgb(0, 0, 0);
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
}
/*#A_3:after*/
#A_3:before {
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: block;
letter-spacing: 0.3px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
white-space: nowrap;
border: 0px none rgb(0, 0, 0);
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
}
/*#A_3:before*/
#SPAN_4,
#SPAN_12,
#SPAN_18 {
block-size: 0px;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 0px;
inline-size: 0px;
letter-spacing: 0.3px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 0px 0px;
text-align: left;
text-size-adjust: 100%;
transform-origin: 0px 0px;
white-space: nowrap;
width: 0px;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_4, #SPAN_12, #SPAN_18*/
#SPAN_4:after,
#SPAN_12:after,
#SPAN_18:after {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_4:after, #SPAN_12:after, #SPAN_18:after*/
#SPAN_4:before,
#SPAN_12:before,
#SPAN_18:before {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_4:before, #SPAN_12:before, #SPAN_18:before*/
#SPAN_5 {
block-size: 26px;
bottom: 0px;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 26px;
inline-size: 42.875px;
left: 0px;
letter-spacing: 0.3px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 21.4375px 13px;
position: relative;
right: 0px;
text-align: left;
text-size-adjust: 100%;
top: 0px;
transform-origin: 21.4375px 13px;
white-space: nowrap;
width: 42.875px;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_5*/
#SPAN_5:after {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_5:after*/
#SPAN_5:before {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_5:before*/
#SPAN_6,
#SPAN_14,
#SPAN_20 {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
perspective-origin: 0px 0px;
text-align: left;
text-size-adjust: 100%;
transform-origin: 0px 0px;
white-space: nowrap;
z-index: 0;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_6, #SPAN_14, #SPAN_20*/
#SPAN_6:after,
#SPAN_14:after,
#SPAN_20:after {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_6:after, #SPAN_14:after, #SPAN_20:after*/
#SPAN_6:before,
#SPAN_14:before,
#SPAN_20:before {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_6:before, #SPAN_14:before, #SPAN_20:before*/
#SPAN_7,
#SPAN_15,
#SPAN_21 {
bottom: 0px;
box-sizing: border-box;
cursor: pointer;
left: 0px;
letter-spacing: 0.3px;
perspective-origin: 0px 0px;
position: relative;
right: 0px;
text-align: left;
text-size-adjust: 100%;
top: 0px;
transform-origin: 0px 0px;
white-space: nowrap;
z-index: 2;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_7, #SPAN_15, #SPAN_21*/
#SPAN_7:after,
#SPAN_15:after,
#SPAN_21:after {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_7:after, #SPAN_15:after, #SPAN_21:after*/
#SPAN_7:before,
#SPAN_15:before,
#SPAN_21:before {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_7:before, #SPAN_15:before, #SPAN_21:before*/
#SPAN_8 {
align-items: center;
block-size: 36px;
box-sizing: border-box;
cursor: pointer;
display: none;
height: 36px;
inline-size: 36px;
justify-content: center;
letter-spacing: 0.3px;
margin-inline-start: 18px;
position: absolute;
text-align: left;
text-size-adjust: 100%;
top: 50%;
white-space: nowrap;
width: 36px;
z-index: 3;
border-radius: 3px;
font: 700 18px / 26px Arial, sans-serif;
list-style: outside none none;
margin: 0px 0px 0px 18px;
}
/*#SPAN_8*/
#SPAN_8:after {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 18px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_8:after*/
#SPAN_8:before {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 18px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_8:before*/
#I_9 {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 18px / 18px FontAwesome;
list-style: outside none none;
}
/*#I_9*/
#I_9:after {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 18px / 18px FontAwesome;
list-style: outside none none;
}
/*#I_9:after*/
#I_9:before {
box-sizing: border-box;
content: '""';
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 18px / 18px FontAwesome;
list-style: outside none none;
}
/*#I_9:before*/
#LI_10 {
align-items: center;
block-size: 103px;
box-sizing: border-box;
display: flex;
height: 103px;
inline-size: 74.8281px;
letter-spacing: 0.16px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 37.4062px 51.5px;
text-size-adjust: 100%;
transform-origin: 37.4141px 51.5px;
width: 74.8281px;
flex-flow: column nowrap;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_10*/
#LI_10:after {
box-sizing: border-box;
display: block;
letter-spacing: 0.16px;
text-size-adjust: 100%;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_10:after*/
#LI_10:before {
box-sizing: border-box;
display: block;
letter-spacing: 0.16px;
text-size-adjust: 100%;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_10:before*/
#A_11 {
align-items: center;
block-size: 103px;
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
bottom: 0px;
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: flex;
height: 103px;
inline-size: 74.8281px;
left: 0px;
letter-spacing: 0.3px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
padding-block-end: 10px;
padding-block-start: 10px;
padding-inline-end: 15px;
padding-inline-start: 15px;
perspective-origin: 37.4062px 51.5px;
position: relative;
right: 0px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
top: 0px;
transform-origin: 37.4141px 51.5px;
white-space: nowrap;
width: 74.8281px;
border: 0px none rgb(0, 0, 0);
flex: 1 1 auto;
flex-flow: row wrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
padding: 10px 15px;
transition: all 0.3s ease 0s;
}
/*#A_11*/
#A_11:after {
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: block;
letter-spacing: 0.3px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
white-space: nowrap;
border: 0px none rgb(0, 0, 0);
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
}
/*#A_11:after*/
#A_11:before {
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: block;
letter-spacing: 0.3px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
white-space: nowrap;
border: 0px none rgb(0, 0, 0);
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
}
/*#A_11:before*/
#SPAN_13 {
block-size: 26px;
bottom: 0px;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 26px;
inline-size: 44.8281px;
left: 0px;
letter-spacing: 0.3px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 22.4062px 13px;
position: relative;
right: 0px;
text-align: left;
text-size-adjust: 100%;
top: 0px;
transform-origin: 22.4141px 13px;
white-space: nowrap;
width: 44.8281px;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_13*/
#SPAN_13:after {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_13:after*/
#SPAN_13:before {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_13:before*/
#LI_16 {
align-items: center;
block-size: 103px;
box-sizing: border-box;
display: flex;
height: 103px;
inline-size: 94.125px;
letter-spacing: 0.16px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 47.0625px 51.5px;
text-size-adjust: 100%;
transform-origin: 47.0625px 51.5px;
width: 94.125px;
flex-flow: column nowrap;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_16*/
#LI_16:after {
box-sizing: border-box;
display: block;
letter-spacing: 0.16px;
text-size-adjust: 100%;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_16:after*/
#LI_16:before {
box-sizing: border-box;
display: block;
letter-spacing: 0.16px;
text-size-adjust: 100%;
font: 16px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#LI_16:before*/
#A_17 {
align-items: center;
block-size: 103px;
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
bottom: 0px;
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: flex;
height: 103px;
inline-size: 94.125px;
left: 0px;
letter-spacing: 0.3px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
padding-block-end: 10px;
padding-block-start: 10px;
padding-inline-end: 15px;
padding-inline-start: 15px;
perspective-origin: 47.0625px 51.5px;
position: relative;
right: 0px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
top: 0px;
transform-origin: 47.0625px 51.5px;
white-space: nowrap;
width: 94.125px;
border: 0px none rgb(0, 0, 0);
flex: 1 1 auto;
flex-flow: row wrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
padding: 10px 15px;
transition: all 0.3s ease 0s;
}
/*#A_17*/
#A_17:after {
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: block;
letter-spacing: 0.3px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
white-space: nowrap;
border: 0px none rgb(0, 0, 0);
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
}
/*#A_17:after*/
#A_17:before {
border-block-end-color: rgb(0, 0, 0);
border-block-start-color: rgb(0, 0, 0);
border-inline-end-color: rgb(0, 0, 0);
border-inline-start-color: rgb(0, 0, 0);
box-sizing: border-box;
caret-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
column-rule-color: rgb(0, 0, 0);
display: block;
letter-spacing: 0.3px;
text-align: left;
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
white-space: nowrap;
border: 0px none rgb(0, 0, 0);
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
outline: rgb(0, 0, 0) none 0px;
}
/*#A_17:before*/
#SPAN_19 {
block-size: 26px;
bottom: 0px;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 26px;
inline-size: 64.125px;
left: 0px;
letter-spacing: 0.3px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 32.0625px 13px;
position: relative;
right: 0px;
text-align: left;
text-size-adjust: 100%;
top: 0px;
transform-origin: 32.0625px 13px;
white-space: nowrap;
width: 64.125px;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_19*/
#SPAN_19:after {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_19:after*/
#SPAN_19:before {
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.3px;
text-align: left;
text-size-adjust: 100%;
white-space: nowrap;
font: 700 15px / 26px Arial, sans-serif;
list-style: outside none none;
}
/*#SPAN_19:before*/
#SPAN_5:hover,
#SPAN_13:hover,
#SPAN_19:hover {
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: red;
}
<body>
<ul id="UL_1">
<li id="LI_2">
<span id="SPAN_4"></span> <span id="SPAN_5"><span id="SPAN_6"></span> <span id="SPAN_7">Home <span id="SPAN_8"><i id="I_9"></i></span></span></span>
</li>
<li id="LI_10">
<span id="SPAN_12"></span> <span id="SPAN_13"><span id="SPAN_14"></span> <span id="SPAN_15">About</span></span>
</li>
<li id="LI_16">
<span id="SPAN_18"></span> <span id="SPAN_19"><span id="SPAN_20"></span> <span id="SPAN_21">Services</span></span>
</li>
</ul>
</body>
The links of the pages have each a hover which consists of a bottom border. The problem is that the hover activates just when the mouse is on the text, instead of working in the whole surrounding area ( full area up and down and a few px in right and left).
The navigation is built with the flexbox. I tried to apply the border to the #A_3 and although the hover area expands, the border-bottom moves too low. Is like a paradox because either I have to move the border too low so that the hover area is bigger or keep the border where it should be but the hover works only on text.
This is because the border is after padding and hover works only on the padding zone. I saw on other websites that this style is done with the after pseudoelement, I tried to do it this way, but it didn’t work.
So, my question is, how can I expand the hover zone while keeping the border-bottom just below the text?
I believe you want to hover your LI and the inner span should get the border.
Updated jsfiddle
In order to do that just update you hover css like below
#LI_2:hover #SPAN_5,
#LI_10:hover #SPAN_13,
#LI_16:hover #SPAN_19 {
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: red;
}
Related
CSS Button not rendering correctly on iPad
I have a button created with css on a web application, when I test the button on chrome on android the button renders fine and stays on top of everything because of the z-index property:
But when I test the same thing on chrome on IOS it doesnt renders the button the way its supposed to be and doesnt respect the z-index property:
I tried to add "-webkit-appearance: none;" to the css but it didnt worked heres the css and html:
#PINPOINT {
-webkit-appearance: none;
width: 70px;
height: 70px;
margin: 15px auto;
position: relative;
z-index: 5000;
}
#BUTTON {
-webkit-appearance: none;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 70px;
text-align: left;
width: 70px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 227.828px 35px;
transform-origin: 227.828px 35px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px Roboto, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
position: fixed;
right: 0;
}
#TEXT {
-webkit-appearance: none;
bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 55.5px;
left: 0px;
letter-spacing: 0.5px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
top: 0px;
vertical-align: middle;
width: 55.5px;
will-change: opacity, transform;
z-index: 1;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 27.75px 27.75px;
transform-origin: 27.75px 27.75px;
background: rgb(239, 83, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 50% 50% 50% 50%;
font: normal normal normal normal 14px / 56px Roboto, sans-serif;
margin: 0px 0px 14px;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
transition: all 0.3s ease-out 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div id="PINPOINT">
<div id="BUTTON">
<i class="fa fa-reply" aria-hidden="true"></i>
</div>
</div>
You may use flexbox to make them align horizontally and vertically center. Here's the code.
#PINPOINT {
-webkit-appearance: none;
width: 70px;
height: 70px;
margin: 15px auto;
position: relative;
z-index: 5000;
}
#BUTTON {
-webkit-appearance: none;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 70px;
text-align: left;
width: 70px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 227.828px 35px;
transform-origin: 227.828px 35px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px Roboto, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
position: fixed;
right: 0;
}
#TEXT {
-webkit-appearance: none;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
height: 55.5px;
letter-spacing: 0.5px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 55.5px;
will-change: opacity, transform;
z-index: 1;
transform-origin: 27.75px 27.75px;
background: rgb(239, 83, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 50% 50% 50% 50%;
font: normal normal normal normal 14px / 56px Roboto, sans-serif;
margin: 0px 0px 14px;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
transition: all 0.3s ease-out 0s;
/*Use flexbox property to fix this.*/
display: flex;
justify-content: center;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div id="PINPOINT">
<div id="BUTTON">
<i class="fa fa-reply" aria-hidden="true"></i>
</div>
</div>
How to properly overlap text over an image
I'm having a bit of trouble having my text display only within my image. It's dependent on the length of the text, if it's two rows long, then it'll display correct. Any longer it'll extend past the image. I can fix this by setting the bottom: 25px; for my featured_wrapper but I don't think that's a Good fix. If the text is only 2 rows long then that it sets the text higher than it should. May I ask how should I properly set the text so that it'll always remain within the image. <div id="featured_item"> <a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link"> <picture id="featured_picture"> <img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' /> </picture> <div id="featured_wrapper"> <h3 id="featured_title"> A Beginners Guide To Getting Six Pack Abs ... add in some more text </h3> </div> </a> </div> http://codepen.io/anon/pen/eZVdpq
Change the height to auto in your #featured_wrapper rule
#featured_wrapper {
bottom: -2px;
box-sizing: border-box;
color: rgb(40, 173, 230);
height: auto; /* <--- changed to auto */
#featured_item {
box-sizing: border-box;
color: rgb(34, 34, 34);
height: 173.813px;
min-height: auto;
min-width: auto;
overflow-wrap: break-word;
position: relative;
width: 309.297px;
word-wrap: break-word;
perspective-origin: 154.641px 86.9063px;
transform-origin: 154.641px 86.9063px;
border: 0px none rgb(34, 34, 34);
font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
margin: 0px 21px 0px 0px;
outline: rgb(34, 34, 34) none 0px;
}
#featured_link {
box-sizing: border-box;
color: rgb(40, 173, 230);
display: block;
height: 173.813px;
overflow-wrap: break-word;
text-decoration: none;
width: 309.297px;
word-wrap: break-word;
perspective-origin: 154.641px 86.9063px;
transform-origin: 154.641px 86.9063px;
background: rgb(245, 245, 245) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(40, 173, 230);
font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
outline: rgb(40, 173, 230) none 0px;
padding: 0px 0px 173.813px;
}
#featured_picture {
box-sizing: border-box;
color: rgb(40, 173, 230);
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
word-wrap: break-word;
border: 0px none rgb(40, 173, 230);
font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
outline: rgb(40, 173, 230) none 0px;
}
#featured_image {
box-sizing: border-box;
color: rgb(40, 173, 230);
display: inline-block;
height: 173.969px;
max-width: 100%;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
vertical-align: middle;
width: 309.297px;
word-wrap: break-word;
perspective-origin: 154.641px 86.9844px;
transform-origin: 154.641px 86.9844px;
background: rgb(245, 245, 245) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(40, 173, 230);
font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
outline: rgb(40, 173, 230) none 0px;
overflow: hidden;
}
#featured_wrapper {
bottom: -2px;
box-sizing: border-box;
color: rgb(40, 173, 230);
height: auto;
left: 0px;
overflow-wrap: break-word;
position: absolute;
right: 20px;
width: 289.297px;
word-wrap: break-word;
perspective-origin: 144.641px 45px;
transform-origin: 104.641px 45px;
border: 0px none rgb(40, 173, 230);
font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
outline: rgb(40, 173, 230) none 0px;
}
#featured_title {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline;
height: auto;
overflow-wrap: break-word;
position: relative;
text-rendering: optimizeLegibility;
width: auto;
word-wrap: break-word;
background: rgba(0, 0, 0, 0.701961) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 22px / 22px ProximaNovaCond, sans-serif;
margin: 0px 0px 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 0px 10px;
transition: all 0.1s ease-in-out 0s;
}
<div id="featured_item">
<a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link">
<picture id="featured_picture">
<img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' />
</picture>
<div id="featured_wrapper">
<h3 id="featured_title">
A Beginners Guide To Getting Six Pack Abs ... add in some more text
</h3>
</div>
</a>
</div>
And I don't think you need all that CSS/markup either, so here is a shortened version for you.
#featured_item {
position: relative;
width: 309.297px;
margin: 0px 21px 0px 0px;
}
#featured_link {
display: block;
position: relative;
text-decoration: none;
}
#featured_image {
max-width: 100%;
}
#featured_title {
color: rgb(255, 255, 255);
height: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-rendering: optimizeLegibility;
background: rgba(0, 0, 0, 0.701961);
font: normal 22px / 22px ProximaNovaCond, sans-serif;
padding: 0px 10px;
transition: all 0.1s ease-in-out 0s;
}
<div id="featured_item">
<a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link">
<img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' />
<div id="featured_title">
A Beginners Guide To Getting Six Pack Abs ... add in some more text
</div>
</a>
</div>
Remove the height: 50px; in the #featured_wrapper rule and also change the bottom:2px; to 0 to make it be stick to the bottom. Like this I also change the display:inline of the text and add a width:100% to make the text adapt the full width of the image.
How to fit content inside div
I'm having trouble fitting any amount of content inside the entire block div, I've tried to set the height to auto however that didn't work, I've tried the overflow property which didn't work as well. I would like the entire div height to expand when there is more content because I'm dynamically changing the content, I'm not understanding why the entire div height is not expanding as there is more content inside it. Below is the example.
Please provide thorough explanation to why the div height is not expanding.
#entire-block {
bottom: 50px;
box-shadow: rgb(159, 159, 155) 4px 4px 4px -1px;
box-sizing: border-box;
/* min-height: 136px; */
height: auto;
position: fixed;
overflow: ;
right: 0px;
width: 370px;
z-index: 999;
background: rgb(215, 215, 210) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal 16px/16px'Times New Roman';
padding: 10px 10px 13px;
}
/*#DIV_1*/
#A_2 {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: none;
left: 5px;
position: fixed;
text-decoration: none solid rgb(255, 255, 255);
top: 43px;
z-index: 999;
border: 0px none rgb(255, 255, 255);
font: normal normal normal 25px/25px'Source Sans Pro ExtraLight';
outline: rgb(255, 255, 255) none 0px;
}
/*#A_2*/
#x {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
float: right;
height: 44px;
text-decoration: none solid rgb(255, 255, 255);
width: 21px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal 44px/44px'Source Sans Pro ExtraLight';
margin: -11px 0px 0px;
outline: rgb(255, 255, 255) none 0px;
}
/*#A_3*/
#entire-content-section {
box-sizing: border-box;
height: 113px;
width: 350px;
font: normal normal normal 16px/16px'Times New Roman';
}
/*#DIV_4*/
#IMG_5 {
box-sizing: border-box;
display: block;
float: left;
height: auto;
width: 40px;
font: normal normal normal 16px/16px'Times New Roman';
margin: 0px 10px 0px 0px;
}
/*#IMG_5*/
#top-content-section {
box-sizing: border-box;
height: 90px;
width: 350px;
font: normal normal normal 16px/16px'Times New Roman';
}
/*#DIV_6*/
#content-header {
box-sizing: border-box;
height: 56px;
width: 350px;
font: normal normal normal 28px/28px league_gothicregular;
margin: 0px;
padding-top: 1%;
}
/*#H3_7*/
#middle-content {
box-sizing: border-box;
font: normal normal normal 16px/16px'Source Sans Pro';
}
/*#SPAN_8*/
#content-bottom {
box-sizing: border-box;
color: rgb(0, 173, 237);
cursor: pointer;
display: block;
height: 12px;
letter-spacing: 1.6799999475479126px;
text-decoration: none solid rgb(0, 173, 237);
text-transform: uppercase;
width: 350px;
border: 0px none rgb(0, 173, 237);
font: normal normal normal 12px/12px'Source Sans Pro Black';
margin: 11px 0px 0px;
outline: rgb(0, 173, 237) none 0px;
}
/*#A_11*/
<div id="entire-block">
<a id="x">×</a>
<div id="entire-content-section">
<img src="http://www.ratemyprofessors.com/assets/average-icon-b4b6eb5e309d26486d76ecebe920220f.jpg?1455038037" id="IMG_5" alt='' />
<div id="top-content-section">
<h3 id="content-header">
Average
</h3> <span id="middle-content">Attending class is not necessary, but reading the textbook is a must. I attended all of his classes for ECON1000 but didn't find it helpful, so I never went to class for ECON1010. Do your readings and study from the test banks. With some effort, you're guaranteed to get an A. Would take his class again.</span>
</div>
Find out what students are saying.
</div>
</div>
You have fixed the height that's why it is showing of fixed height. Remove height from #entire-content-section and #top-content-section.
Two horizontal lines across a box [duplicate]
This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
I am trying to draw two horizontal lines across a box:
http://codepen.io/anon/pen/gpZqOQ
I used a plugin to generate some code based on a design. However the end result is not optimized.
<h1 id="H1_1">
<span id="SPAN_2">Feedback</span>
</h1>
#H1_1 {
box-sizing: border-box;
clear: both;
color: rgb(64, 64, 64);
height: 45px;
position: relative;
text-align: center;
width: 1140px;
perspective-origin: 570px 22.5px;
transform-origin: 570px 22.5px;
border: 0px none rgb(64, 64, 64);
font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
margin: 0px 0px 70px;
outline: rgb(64, 64, 64) none 0px;
}/*#H1_1*/
#H1_1:after {
box-sizing: border-box;
color: rgb(64, 64, 64);
display: block;
height: 1px;
left: 0px;
position: absolute;
text-align: center;
top: 22.5px;
width: 1140px;
align-self: stretch;
perspective-origin: 570px 0.5px;
transform-origin: 570px 0.5px;
content: '"' '"';
background: rgb(189, 195, 199) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(64, 64, 64);
font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
outline: rgb(64, 64, 64) none 0px;
}/*#H1_1:after*/
#SPAN_2 {
box-sizing: border-box;
color: rgb(189, 195, 199);
display: inline-block;
height: 45px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 108.890625px;
z-index: 10;
perspective-origin: 54.4375px 22.5px;
transform-origin: 54.4375px 22.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
transition: all 0.2s ease 0s;
}/*#SPAN_2*/
Is there any other simpler way to achieve this via CSS?
<hr style=" width : 100%;">
<span id="SPAN_2">Feedback</span>
Apply following CSS
hr{
display: inline-block;
margin: 25px 0;
position: absolute;
}
#SPAN_2 {
position: absolute;
z-index: 2;
display: inline-block;
border: 3px solid rgb(189, 195, 199);
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
margin: 0 0 0 50%;
}
Try this:
<div>
bla
</div>
in combination with:
div {
padding: 80px;
background-color: red;
border-top: 5px double black;
border-bottom: 3px dotted black;
}
See http://jsfiddle.net/4ghvvke3/ to get the idea.
Or do I misunderstand your question, and do you wish to have a line behind your main box object?
I that case I advise background-image of 1px width with x-repeat, probably less bytes than all the CSS code.
Demo
using :before and :after like you have it, i added a classname instead of random ids
<h1 class="feedback">
<span>Feedback</span>
</h1>
css
.feedback {
position: relative;
text-align: center;
}
.feedback span {
box-sizing: border-box;
color: rgb(189, 195, 199);
display: inline-block;
height: 45px;
position: relative;
text-align: center;
text-transform: uppercase;
width: auto;
z-index: 10;
perspective-origin: 54.4375px 22.5px;
transform-origin: 54.4375px 22.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
transition: all 0.2s ease 0s;
position: relative;
z-index: 1;
}
.feedback:before,
.feedback:after {
content: '';
display: inline-block;
border: 1px solid rgb(189, 195, 199);
width: 100%;
position: absolute;
z-index: 0;
left: 0;
}
.feedback:before {
top: 40%;
}
.feedback:after {
bottom: 40%;
}
I made a simple fiddle to demonstrate the simplest way of achieving this.
<div id="box">
<hr class="line1">
<hr class="line2">
</div>
And CSS:
#box {
width: 85%;
margin: 0 auto;
}
.line1 {
width: 100%;
}
.line2 {
width: 100%;
}
This uses the hr property to draw 2 lines horizontally, in this case taking up 100% width of the parent container.
Or something like this for thinner lines.
.container {
width: 100%;
margin-top:3em;
text-align:center;
}
.feedback_box {
color: rgb(189, 195, 199);
line-height:45px;
text-align: center;
text-transform: uppercase;
background: rgb(255, 255, 255);
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
padding: 1em;
z-index:4;
position:relative;
}
.line1, .line2 {
border:0;
height:3px;
background:rgb(189, 195, 199);
}
.line1 {
margin-bottom:-20px;
}
.line2 {
margin-top:-20px;
}
<div class="container">
<hr class="line1">
<span class="feedback_box">Feedback</span>
<hr class="line2">
</div>
css triangle at the end of <li>
I want to achieve something like this
How do I put this triangle css
.triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 21px 42px 21px 0;
border-color: transparent #eeeeee transparent transparent;
line-height: 0px;
_border-color: #000000 #eeeeee #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
to make a triangle at the end of my tab? DEMO http://jsfiddle.net/p69qfqsx/
New CSS for the list:
ul{
width: 200px;
border: 1px solid #ccc;
}
li a{
background-color: #fff;
padding: 5px 10px;
display: block;
position: relative;
color: #666;
text-decoration: none;
}
li a:hover, li.active a{
background-color: #eee;
}
li a:hover:after, li.active a:after{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
/* background-color: #ddd; */
content: '';
position: absolute;
right: -2px;
top: 0;
}
https://jsfiddle.net/p69qfqsx/2/
Tested just for chrome hope it helps.
Here's the codes I modify for little change:
li a:hover:after{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 12px solid transparent;
border-right: 10px solid #fff;
/* background-color: #ddd; */
content: '';
position: absolute;
right: -2px;
top: 1;
}
I just remove li.active a:after to let pointer makes it. DEMO
But I prefer using what #Andre Morales suggest since it works here.
It's pretty easy. You can do it in many methods, I can suggest an easy trick. Add an span inside the li tag. check this out : jsFiddle
HTML
<li id="LI_3">
Platform
<span class="trian"></span>
</li>
CSS
.trian {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 25px solid #fff;
position:absolute;
right:0;
top:0;
}
Add this to your css where .active is the class of the current list
[id^=UL_] > [id^=LI_].active:before{
position: absolute;
top: 0;
right: -1px; /* -1px to hide the right border */
content:'';
z-index: 1;
border-top: 20px solid transparent; /*20 = li.height /2 */
border-bottom: 20px solid transparent;
border-right: 20px solid white
}
DEMO
#DIV_1 {
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 264px;
min-height: 1px;
position: relative;
width: 169px;
perspective-origin: 84.5px 132px;
transform-origin: 84.5px 132px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
margin: 0px 0px 0px -15px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 15px;
}/*#DIV_1*/
#UL_2 {
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 264px;
width: 139px;
perspective-origin: 69.5px 132px;
transform-origin: 69.5px 132px;
border-top: 0px none rgb(51, 51, 51);
border-right: 1px solid rgb(238, 238, 238);
border-bottom: 0px none rgb(51, 51, 51);
border-left: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
margin: 0px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px;
}/*#UL_2*/
#UL_2:after {
box-sizing: border-box;
clear: both;
color: rgb(51, 51, 51);
display: table;
width: 1px;
perspective-origin: 0.5px 0px;
transform-origin: 0.5px 0px;
content: ' ';
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 51, 51) none 0px;
}/*#UL_2:after*/
#UL_2:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: table;
width: 1px;
perspective-origin: 0.5px 0px;
transform-origin: 0.5px 0px;
content: ' ';
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 51, 51) none 0px;
}/*#UL_2:before*/
#LI_3 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
height: 40px;
position: relative;
width: 139px;
perspective-origin: 69.5px 20px;
transform-origin: 69.5px 20px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
margin: 0px -1px -1px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#LI_3*/
#A_4 {
box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
height: 40px;
position: relative;
text-align: left;
text-decoration: none;
width: 139px;
perspective-origin: 69.5px 20px;
transform-origin: 69.5px 20px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(85, 85, 85);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(85, 85, 85) none 0px;
padding: 10px 15px;
}/*#A_4*/
#LI_5, #LI_7, #LI_9, #LI_13 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
height: 42px;
position: relative;
width: 139px;
perspective-origin: 69.5px 21px;
transform-origin: 69.5px 21px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
margin: 0px -1px -1px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#LI_5, #LI_7, #LI_9, #LI_13*/
#A_6, #A_8, #A_14 {
box-sizing: border-box;
color: rgb(51, 122, 183);
display: block;
height: 42px;
position: relative;
text-align: left;
text-decoration: none;
width: 139px;
perspective-origin: 69.5px 21px;
transform-origin: 69.5px 21px;
border: 1px solid rgba(0, 0, 0, 0);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 122, 183) none 0px;
padding: 10px 15px;
}/*#A_6, #A_8, #A_14*/
#A_10 {
box-sizing: border-box;
color: rgb(51, 122, 183);
display: block;
height: 42px;
position: relative;
text-align: left;
text-decoration: none;
width: 139px;
perspective-origin: 69.5px 21px;
transform-origin: 69.5px 21px;
border: 1px solid rgba(0, 0, 0, 0);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 122, 183) none 0px;
padding: 10px 15px;
}/*#A_10*/
#LI_11 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
height: 62px;
position: relative;
width: 139px;
perspective-origin: 69.5px 31px;
transform-origin: 69.5px 31px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
margin: 0px -1px -1px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#LI_11*/
#A_12 {
box-sizing: border-box;
color: rgb(51, 122, 183);
display: block;
height: 62px;
position: relative;
text-align: left;
text-decoration: none;
width: 139px;
perspective-origin: 69.5px 31px;
transform-origin: 69.5px 31px;
border: 1px solid rgba(0, 0, 0, 0);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 122, 183) none 0px;
padding: 10px 15px;
}/*#A_12*/
[id=UL_2] > [id=LI_3]:before{
position: absolute;
top: 0;
right: -1px;
content:'';
z-index: 1;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid white
}
<div id="DIV_1">
<!-- required for floating -->
<!-- Nav tabs -->
<ul id="UL_2">
<li id="LI_3">
Platform
</li>
<li id="LI_5">
Content
</li>
<li id="LI_7">
Marketing
</li>
<li id="LI_9">
Social
</li>
<li id="LI_11">
In-app Responses
</li>
<li id="LI_13">
Systems
</li>
</ul>
</div>
I think this is a cleaner method using clip-path:
ul{
width: 160px;
border: 1px solid #ccc;
border-right: none;
list-style-type: none;
margin:0;
padding:0;
}
li a{
padding: 5px 10px;
display: block;
color: #666;
text-decoration: none;
border-right:1px solid #ccc;
}
li a:hover, li.active a{
background-color: #eee;
clip-path: polygon( 0% 0%,0% 100%,100% 100%,92% 50%,100% 0%);
}
<ul>
<li class="active">
Platform
</li>
<li>
Content
</li>
<li>
Marketing
</li>
<li>
Social
</li>
<li>
In-app Responses
</li>
<li>
Systems
</li>
</ul>