Simplifying a code


#1

How come left: 0; isn't needed in the code?

Why don't I need it?

or, do I give it that value anyway?

https://jsfiddle.net/o9novv7z/31/

.wrapa {
  position: relative;
  width: 606px;
  height: 50px;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: red;
}

.wrapa::before,
.wrapa::after {
  content: "";
  position: absolute;
  width: 201px;
  height: 100%;
  box-sizing: border-box;
}

.wrapa::before {
  background-color: green;
  border-right: 3px solid #0059dd;
}

.wrapa::after {
  right: 0;
  background-color: orange;
  border-left: 3px solid #0059dd;
}

.activea {
  background: #ffffff;
}

.activea::before {
  background-color: #00ffff;
}

.activea::after {
  background-color: #ff00ff;
}

#2

I'm going to say, this is just a guess,

I would include the left: 0; anyway.

Would I be right here?


#3

An absolute positioned box will always default to the left edge of it's containing block's padding box.

If you were to remove the right:0; from your other box, you would see it come over to the left side and layer on top of the ::before green box.

I've never seen any browser place an ap'd box anywhere other than the left side without the offset values being set. Of course that assumes the box has a narrower width than it's containing block.

It never hurts to add the left:0; in the rules, then the browser has firm instructions what to do with it.

It's also the same with static blocks, they will default to the left side of their container too if they have a narrower fixed width.


#4

Which would you say is better to use?

.linesc::before,
.linesc::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 100%;
  box-sizing: border-box;
}

.linesc::before {
  left: 0;
  border-right: 3px solid #0059dd;
}

.linesc::after {
  right: 0;
  border-left: 3px solid #0059dd;
}

or this?

.linesc::before,
.linesc::after {
  content: "";
  position: absolute;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.linesc::after {
  left: 174px;
}

#5

I'd probably go with the 2nd one since it's less code and does the same thing


#6

How come you didn't use
box-sizing: border-box; for this?
https://jsfiddle.net/1hzjr14y/8/

Is using a percentage here better?

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background: url("https://i.imgur.com/xmdldMK.png") no-repeat -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

You used this:

  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  background: url("https://i.imgur.com/xmdldMK.png") no-repeat -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  transition: all 2s;
}

#7

That’s not quite true Ray as the default is auto which means the absolutely placed element will be positioned at the point it was in the flow.

Most of the time that will appear to be the left side but if the parent had text align center or text align right then the absolute element would be central or to the right without positioning assuming it was an inline element before being absolutely positioned.

It was common practice to position drop down menus using left auto when only the main parent (the ul usually) had position relative yet the drop menus would always line up with the top menu items as required. Old IE used to get this wrong so everyone started using left:0 and adding position relative to the list item instead.

Therefore unless you specifically want auto positioning behavior it is better to always supply at least two co-ordinates for your absolute elements just to be sure. :slight_smile:


Absolute Positioning elements
#8

I was trying this, just to see if I could get it, but it's not working.
https://jsfiddle.net/t1u8k0Lh/2/

.linese li:nth-of-type(15) a::before,
.linese li:nth-of-type(15) a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.linese li:nth-of-type(15) a::after {
  left: 15px;
}

#9

After reading through your post, I remember every bit of what you said now. :slight_smile:

I was also wondering if dirction:rtl; changed the flow, I assume it does.

The same applies with position:fixed in that case too doesn't it?
That was the trick to keeping it inside a wrapping div, by not setting offset coordinates but using margins to shift it if you needed to move it.

Once you set offsets it goes to the viewport


#10

<div class="linese"></div> does not have any list items in it , .linese li
It's just an empty div without any children or styles


#11

What would have worked, I tried many different things.


#12

Which would you go with here?

1.)
https://jsfiddle.net/o9novv7z/50/

.activea {
  background: #ffffff;
}

.activea::before,
.activea::after {
  content: "";
  position: absolute;
  width: 198px;
  height: 100%;
}

.activea::before {
  left: 0;
  background-color: #00ffff;
}

.activea::after {
  right: 0;
  background-color: #ff00ff;
}

.linesa::before,
.linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.linesa::after {
  left: 399px;
}

vs.

this:

2.)
https://jsfiddle.net/o9novv7z/48/

.wrapa::before,
.wrapa::after {
  content: "";
  position: absolute;
  width: 201px;
  height: 100%;
  box-sizing: border-box;
}

.wrapa::before {
 left: 0;
  border-right: 3px solid #0059dd;
}

.wrapa::after {
  right: 0;
  border-left: 3px solid #0059dd;
}

.activea {
  background: #ffffff;
}

.activea::before {
  background-color: #00ffff;
}

.activea::after {
  background-color: #ff00ff;
}

#13

Yes as you mentioned it's useful in making something fixed at the point it would have been in the flow.:slight_smile:

As usual 'it all depends' and there is no real definitive answer because it all depends on what happens next?

The second example doesn't need two pseudo elements as you could simply add borders to the same box.

e.g.

.wrapa::after {
  content: "";
  position: absolute;
  width: 201px;
  height: 100%;
  left:0;
  right:0;
  margin:auto;
  box-sizing: border-box;
}
.wrapa::after {
  border-right: 3px solid #0059dd;
  border-left: 3px solid #0059dd;
}

The before element is superfluous for a visual point of view but it all depends whether you are going to do something with the other methods as the boxes were right and left whereas in my example is in the middle. Then there is the issue of stacking contexts and you would need to ensure clickable elements aren't masked by the pseudo elements. In the first example the pseudo elements are only 3px wide so there is less danger of them getting in the way.

All the methods may be correct depending on what happens next and only you know that:)


#14

This doesn't work on number 2.
https://jsfiddle.net/o9novv7z/56/

It's nowhere near the same as this.
https://jsfiddle.net/o9novv7z/48/


#15

If you're telling me this can't be done, I'll give up on it.

I tried these 2 ways:

https://jsfiddle.net/t1u8k0Lh/20/

    <div class="linese">  <li>
    <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a> 
    </li></div>

https://jsfiddle.net/t1u8k0Lh/18/

    <div class="linese"><a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a> </div>

#16

I was attempting transition on left and right borders, and couldn't quite get it.

What would've worked here?
https://jsfiddle.net/mzc14gh3/4/

.linesb::before,
.linesb::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 100%;
  box-sizing: border-box;
  transition: all 2s;
}

.linesb::before {
  left: 0;
  border-right: 3px solid #0059dd;
}

.linesb::after {
  right: 0;
  border-left: 3px solid #e77d19;
}

.activeb .linesb::before {
  left: 0;
  border-right: 3px solid #e77d19;
}

.activeb .linesb::after {
  right: 0;
  border-left: 3px solid #0059dd;
}

#17

Further testing:

Almost got it, not quite though.
https://jsfiddle.net/mzc14gh3/18/

The transition doesn't work the same as this:
I wonder why that is.
https://jsfiddle.net/1hzjr14y/10/

I think I did something wrong.

I got it:
https://jsfiddle.net/mzc14gh3/55/

.linesb::before,
.linesb::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 100%;
  box-sizing: border-box;
  transition: all 2s;
}

.linesb::before {
  left: 0;
  border-right: 3px solid #0059dd;
}

.linesb::after {
  right: 0;
  border-left: 3px solid #0059dd;
}

.activeb .linesb::before {
  left: 0;
  border-right: 3px solid #e77d19;
}

.activeb .linesb::after {
  right: 0;
  border-left: 3px solid #e77d19;
}

#18

Because a border is being used here,
would it make sense to use box-sizing: border-box; instead of not using it?

Box-sizing:
https://jsfiddle.net/1hzjr14y/8/

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background: url("https://i.imgur.com") no-repeat -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

No box-sizing:
https://jsfiddle.net/1hzjr14y/19/

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  background: url("https://i.imgur.com") no-repeat -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  transition: all 2s;
}

#19

Just adjust the width of the pseudo element until it matches the position you need (unless you meant something else).

The code should be like this:

    <li>
      <div class="linese">
        <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
        </div>
    </li>

Makes no difference. You either cater for one way or the other.

I prefer to use border-box model by default on everything as most times it's easier to use.

This will set all elements to use the border-box model by default and is always the first part of my initial stylesheet.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

#20

The code should be like this:

That doesn't work as there are no lines going down the colored block.

https://jsfiddle.net/t1u8k0Lh/22/

  <li>
      <div class="linese">
        <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
        </div>
    </li>

.linese li:nth-of-type(15) a::before,
.linese li:nth-of-type(15) a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.linese li:nth-of-type(15) a::after {
  left: 20px;
}

It should look like this: