overflow hidden のある子要素だけはみ出した部分を表示する方法はありますか？

Question

こちらにコードを載せていますが、この親からはみ出しているcontentを表示するにはどうすれば良いでしょうか？
div同士の位置関係はこのようにしたいです。

お手数ですがお分かりになる方いましたらご教示いただけますと幸いです。

念の為以下にもコードを貼っておきます。

<div class="outer">
  <div class="content"> test </div>
</div>

.outer {
  position: relative;
  background: green;
  width: 1000px;
  height: 300px;
  overflow: hidden;
}

.content {
  position: absolute;
  background: blue;
  width: 60px;
  height: 30px;
  top: 50%;
  right: -3%; 
}

Comments

[hatena19]

HTMLを変更することは可能ですか。

子要素が提示以外にもありそれははみ出している部分は非表示で、特定の要素だけはみ出した部分を表示したいということでしょうか。

[Hayato1201]

>HTMLを変更することは可能ですか
できれば変更したくないです。
>子要素が提示以外にもありそれははみ出している部分は非表示で、特定の要素だけはみ出した部分を表示したいということでしょうか。
はい！その通りです。

Answer 1

HTMLを変更せずに実現する方法は自分は分からないので、HTMLを変更して実現する方法を回答します。

outerブロック内にinnerブロックを作成して、はみ出し部分を隠したい要素はこの中にいれます。
はみ出し部分を表示したい要素はinnerブロックの外に置きます。
innerブロックにoverflow: hidden;を設定します。

<div class="outer">
  <div class="inner">
    <div class="hide content"> test1 </div>
  </div>
  <div class="show content"> test2 </div>
</div>

.outer {
  position: relative;
  background: green;
  width: 1000px;
  height: 300px;
}
.inner {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.content {
  position: absolute;
  width: 60px;
  height: 30px;
  right: -3%; 
  color: white;
}
.hide.content {
  background: red;
  top: 30%;
}
.show.content {
  background: blue;
  top: 50%;
}

CodePenサンプル