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.

[![enter image description here](https://i.stack.imgur.com/vxGbc.png)](https://i.stack.imgur.com/vxGbc.png)

Here's the code I wrote:

```css
: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);
}
```

```html
<!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>
```