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

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

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

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

html

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

css

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