CSS absolute positioned element after rotate doesn't align well

Question

The problem is the absolute positioned line that doesn't align to the border after it gets rotated -90deg. I first thought the problem might be the transform-origin property but I tried several options and neither fixed the issue.

Here's the code I wrote:

:root {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
}

.square {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.square::after,
.square::before {
  position: absolute;
  content: "";
  top: 50%;
  height: 10px;
  width: 100%;
  background: #0D8C5D;
  transform: translateY(-50%);
}

.square::after {
  transform: rotate(-90deg);
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-square.css">
  <title>Document</title>
</head>
<body>
  <div class="square"></div>
</body>
</html>

score 2 · Accepted Answer · edited Oct 10 '20 at 18:19

It's because of the transform. The second .square::after needs them both, otherwise the translateY(-50%) will be overridden.

:root {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
}

.square {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.square::after,
.square::before {
  position: absolute;
  content: "";
  top: 50%;
  height: 10px;
  width: 100%;
  background: #0D8C5D;
  transform: translateY(-50%);
}

.square::after {
  transform: translateY(-50%) rotate(-90deg);
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-square.css">
  <title>Document</title>
</head>
<body>
  <div class="square"></div>
</body>
</html>

corn on the cob · Answer 2 · 2020-10-10T15:56:34.820

CSS cascades rules, generally based on how specific they are and where they are in the CSS file. If a rule is at the bottom, it will override the one at the top if necessary. So that means that the :after selector will override the one above.

^{CSS stands for Cascading Style Sheets, by the way :)}

You can specify multiple rules in one line for a transform like transform: translateY(-50%) rotate(-90deg); so you can use that

:root {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
}

.square {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.square::after,
.square::before {
  position: absolute;
  content: "";
  top: 50%;
  height: 10px;
  width: 100%;
  background: #0D8C5D;
  transform: translateY(-50%);
}

.square::after {
  transform: translateY(-50%) rotate(-90deg);
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-square.css">
  <title>Document</title>
</head>
<body>
  <div class="square"></div>
</body>
</html>

CSS absolute positioned element after rotate doesn't align well

2 Answers2