How to Prevent :After Pseudo Element from Being Read by Screen Readers

JAWS not able to read ins/del elements with ::before and ::after pseudo-elements in Chrome

The content is not in the DOM and screen readers are reading the DOM, not the visible content on the screen.
So put your content inside the HTML only with sr-only i.e. not visible on Screen but available in the DOM for screen-reader.

<div contenteditable="true" style="border: 1px solid black;">
    <p>This is a div where I am 
       <span class="sr-only">start insert</span>
       <ins>removing</ins>
       <span class="sr-only">end insert</span>
       <span class="sr-only">start delete</span>
       <del>adding</del>
       <span class="sr-only">end delete</span>
     text
    </p>
    <p>
        <span>Regular text just to see how JAWS handles reading this.
    </p>
 </div>

and the css for sr-only class :-

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

How can I prevent the ::before pseudo element from affecting my flex layout?

You can update your pseudo element, like this:

nav ul li.internal-nav.selected a:before,
nav ul li.internal-nav a:hover:before {
  content: '> ';
  position: absolute;
  left: -1rem;
  color: red;
}

nav ul li.internal-nav.selected a:before {
  opacity: .6;
}

Run code snippet and open it on fullpage to see changes.
Also you can check it here (Codepen.io)

header {
  margin-block-start: 3em;
  padding-bottom: 0.67rem;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

nav {
  margin-left: auto;
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding-inline-start: 0;
  padding-left: 1em;
}

nav ul li {
  text-align: right;
  font-size: x-large;
}

nav ul li a:hover {
  color: red;
}

nav ul li.internal-nav a {
  position: relative;
}

nav ul li.internal-nav.selected a:before,
nav ul li.internal-nav a:hover:before {
  content: '> ';
  position: absolute;
  left: -1rem;
  color: red;
}

nav ul li.internal-nav.selected a:before {
  opacity: .6;
}

h1 {
  color: rgba(0, 0, 0, 0.6);
  font-size: 5em;
}

.profile-photo3 {
  position: relative;
  flex: 1;
  min-width: 20rem;
  background-color: blue;
  clip-path: polygon(70% 0%, 100% 50%, 70% 100%, 0% 70%, 20% 15%);
}

.profile-photo3 img {
  width: 100%;
  mix-blend-mode: screen;
}

<head>
  <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-d0f3648046d2aaca07bd0037b9e061a26c74a8a999b75672ad6a638cca641472.js"></script>
  <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
  <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>
</head>

<body>
  <header>
    <h1>Dogs :)</h1>
    
    <div class="profile-photo3"><img src="https://images.dog.ceo/breeds/collie-border/n02106166_2345.jpg"></div>
    
    <nav>
      <ul>
        <li class="internal-nav"><a href="#">About Dogs</a></li>
        <li class="internal-nav selected"><a href="#">My Fav Dogs</a></li>
        <li class="internal-nav"><a href="#">Dog Facts</a></li>
      </ul>
    </nav>
  </header>

  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src="https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-f2136278-4370-4b42-10b9-cde5fe228f8b" crossorigin=""></script>
</body>

html accessibility: anchor tags with background images on pseudo elements

Short answer: prefer the second one, if possible.

The title attribute is a bit tricky since not all screen readers read it by default. So to be on the safe side and 100% covered by screen readers, use the text inside the <a> tags and make it screen reader-only, if needed.

Is there a way to write content that screen readers will ignore?

Halfway through writing the question I remembered where to look.

CSS can do this:

<span class="dontRead">Screen readers shouldn't read this</span>

.dontRead {
    speak: none;
}

always keep pseudo element horizontally in the middle

Very similar to @mgrsskls but using actual :after element. Its an old trick to use absolute, then add left and negative margin equal to half-width. But in your case there is additional margin which needs to be thought of as well.

.content {

    display: flex;

    flex-direction: row;

    justify-content: space-evenly;

    text-align: center;

    margin: 20px;

}

.cc-content {

    width: 50%;

    padding: 5px 20px;

    position: relative;

    background-color: red;

}

.cc-content-1 {

  margin-right: 3px;

}

.cc-content-2 {

  margin-left: 3px;

}

.cc-content-1:after {

    content: 'OR';

    display: inline-block;

    position: absolute;

    vertical-align: middle;

    line-height: 60px;

    top: 20px;

    left: 100%;

    margin-left: -27px;

    z-index: 1;

    font-size: 21px;

    font-weight: bold;

    border-radius: 100%;

    width: 60px;

    height: 60px;

    background-color: #F2F2F2;

    color: #006AAD;

}

<div class="content">

      <div class="cc-content cc-content-1">

        <h3>Header Here</h3>

        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>

      </div>

      <div class="cc-content cc-content-2">

        <h3>Header Here</h3>

        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>

      </div>

</div>