How to add padding-left without moving centered div content?-CodePudding

I have a div with content centered using two sections set to left 50% and left -50%. I want to add padding-left to a caret image so that it slides to the right 10 px without shoving the rest of the content over. I know it has something to do with the div content getting wider once the 10px are added, but I am not sure how to anchor the left-hand side of the content.

Link to codepen: https://codepen.io/mowsie2k/pen/gOvdPLj

Code:

* {
  box-sizing: border-box;
}

body {
  background-image: url("bg1.jpeg");
  background-size: cover;
  margin: 0;
}

.navbar,
.navbar-news {
  font-family: Arial, Helvetica, sans-serif;
  background-color: dodgerblue;
  font-size: small;
  color: white;
  overflow: hidden;
  width: 100%;
}

.navbar-news-outer,
.navbar-news-inner {
  margin: 0mm;
  float: left;
  position: relative;
}

.navbar-news-outer {
  left: 50%
}

.navbar-news-inner {
  left: -50%;
}

.navbar-news a,
.navbar-news i {
  color: bisque;
  transition: color .3s ease-out;
  transition: padding-left .3s ease-out;
}

.navbar-news a:hover {
  color: blueviolet;
}

.navbar-news a:hover i {
  color: blueviolet;
  padding-left: 10px;
}

<div >
  <div >
    <div >
      <span>
      Newest Blog Post: Cybersecurity in the Era of Cloud Infrastructure <a>READ HERE <i ></i></a>
      </span>
    </div>
  </div>
</div>

CodePudding user response：

Use transformX instead of adding padding.

.navbar-news a:hover i {
    color: blueviolet;
    transform: translateX(10px);
}

Change the transition animation too

.navbar-news a, .navbar-news i {
    color: bisque;
    transition: color .3s ease-out;
    transition: transform .3s ease-out;
}

CodePudding user response：

Instead of padding-left, I'd advise using a translateX via the transform function.

The meaningful changes are here:

.navbar-news a, .navbar-news i {
  color: bisque;
  transition: transform .3s ease-out, color .3s ease-out;
}

.navbar-news a:hover i {
  color: blueviolet;
  transform: translateX(10px);
}

Demo

* {
    box-sizing: border-box;
}
  
body {
    background-image: url("bg1.jpeg");
    background-size: cover;
    margin: 0;
}

.navbar, .navbar-news {
    font-family: Arial, Helvetica, sans-serif;
    background-color: dodgerblue;
    font-size: small;
    color: white;
    overflow: hidden;
    width: 100%;
}

.navbar-news-outer, .navbar-news-inner {
    margin: 0mm;
    float: left;
    position: relative;
}

.navbar-news-outer{
    left: 50%
}
.navbar-news-inner{
    left: -50%;
}

.navbar-news a, .navbar-news i {
    color: bisque;
    transition: transform .3s ease-out, color .3s ease-out;
}

.navbar-news a:hover {
    color: blueviolet;
}

.navbar-news a:hover i {
    color: blueviolet;
    transform: translateX(10px);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1" charset="UTF-8">
    <title>Title Here</title>
    <!-- Local CSS -->
    <link rel="stylesheet" href="style3.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Latest compiled and minified CSS -->
    <!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"-->
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div >
        <div >
            <div >
                <span>
                    Newest Blog Post: Cybersecurity in the Era of Cloud Infrastructure <a>READ HERE <i ></i></a>
                </span>
            </div>
        </div>
    </div>
</body>