viereck in div container

[Konni]

danke erst mal

.titel{ position:relative;font-size:15px;background:#004888; color:#FFF; white-padding:10px 10px 10px 10px;}

hier habe ich meine version

 .titel:after {
    content:"";
	padding:35px;
    background: #ff0000;
    position: absolute;
    right: 0px;
    top: 0px;
}
 

das ist die aus dem beispiel

.titel::after {
  content: " ";
  position: absolute;
  display: inline-block;
  width: 35px;
  height: 35px;
  top: 0;
  right: 0;
  background-color: green;
}

aber eines haben beide gemeinsam. ich möchte das viereck gleichgross machen wie das div. also habe ich zwei mal padding und die schrift grösse genommen.

10+10+15 =35

das viereck müsste also genauso gross sein. ist es aber nicht. wenn ich den wert manuell auf 43 erhöhe ist es ausfüllend.

aber das kann doch eigentlich nicht sein, oder?